Design e Recursos

Ribbon Card CSS Gerador

Gerar ribbon badge card CSS.

Mais de Design e Recursos

Entrada

Ribbon Card CSS Gerador

ribbonpromo cardcssui

Saída

Ribbon Card CSS Generator

.ribbon-card {
  position: relative;
  overflow: hidden;
  max-width: 320px;
  border-radius: 12px;
  background: white;
  color: #0f172a;
  padding: 24px;
  box-shadow: 0 18px 32px rgba(15,23,42,0.08);
}

.ribbon-card::after {
  content: "Featured";
  position: absolute;
  top: 16px;
  right: -34px;
  padding: 8px 42px;
  background: #ef4444;
  color: #111827;
  transform: rotate(35deg);
  font-size: 12px;
  font-weight: 700;
}

Live preview

Live canvas

Ferramentas relacionadas

Pill Badge CSS Gerador

Gerar pill badge CSS style.

Pricing Card CSS Gerador

Gerar pricing card CSS styles.

Status Indicator CSS Gerador

Gerar live status badge CSS.

Accordion CSS Gerador

Gerar accordion panel CSS.

Avatar Stack CSS Gerador

Gerar overlapping avatar stack CSS.

Border Radius Gerador

Gerar border-radius CSS de corner values.