Diseño y Recursos

Ribbon Card CSS Generador

Generar ribbon badge card CSS.

Más herramientas de Diseño y Recursos

Entrada

Ribbon Card CSS Generador

ribbonpromo cardcssui

Salida

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

Herramientas relacionadas

Pill Badge CSS Generador

Generar pill badge CSS style.

Pricing Card CSS Generador

Generar pricing card CSS styles.

Status Indicator CSS Generador

Generar live status badge CSS.

Accordion CSS Generador

Generar accordion panel CSS.

Avatar Stack CSS Generador

Generar overlapping avatar stack CSS.

Border Radius Generador

Generar border-radius CSS desde corner values.