Design et Ressources

Progress Bar CSS Générateur

Générer CSS progress bar components.

Plus dans Design et Ressources

Entrée

Progress Bar CSS Générateur

progress barcssuidashboard

Sortie

Progress Bar CSS Generator

.progress-shell {
  width: min(100%, 360px);
  border-radius: 999px;
  background: color-mix(in srgb, #0f172a 14%, white);
  padding: 6px;
}

.progress-bar {
  height: 10px;
  width: 68%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, color-mix(in srgb, #22c55e 65%, white));
  box-shadow: 0 8px 18px color-mix(in srgb, #22c55e 30%, transparent);
}

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.