Design e Recursos

Gerador de CSS para cartão com faixa (ribbon)

Produza CSS para cartões com badge de faixa.

Categoria

Design e Recursos

Gerador de CSS para cartão com faixa (ribbon)

ribbonpromo Cardcssui

Saída

Gerador de Ribbon Card CSS

.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;
}

Ao vivo Prévia

Live canvas