Retour

Design et Ressources

Générateur de CSS pour Timeline

Générez du CSS pour des timelines verticales.

Catégorie

Design et Ressources

Tags

timelineroadmapcssui
Plus dans Design et Ressources
Entrée

Générateur de CSS pour Timeline

timelineroadmapcssui
Exemples rapides
Sortie

Générateur de Timeline CSS

.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);
}
En direct Aperçu
Live canvas