Design et Ressources

Tempsline CSS Générateur

Générer vertical Tempsline CSS.

Plus dans Design et Ressources

Entrée

Tempsline CSS Générateur

timelineroadmapcssui

Sortie

Timeline CSS Generator

.timeline {
  position: relative;
  display: grid;
  gap: 18px;
  padding-left: 26px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ede9fe;
}

.timeline .item {
  position: relative;
  border-radius: 12px;
  background: white;
  color: #0f172a;
  padding: 16px;
}

.timeline .item::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #8b5cf6;
  box-shadow: 0 0 0 4px color-mix(in srgb, #8b5cf6 20%, white);
}

Live preview

Live canvas

Outils similaires

Accordion CSS Générateur

Générer accordion panel CSS.

Avatar Stack CSS Générateur

Générer overlapping avatar stack CSS.

Border Radius Générateur

Générer border-radius CSS de corner values.

Floating Label Input CSS Générateur

Générer floating label input CSS.

Focus Ring CSS Générateur

Générer accessible focus-ring CSS.

Gradient Border CSS Générateur

Générer gradient border CSS styles.