Design e Recursos

Progress Bar CSS Gerador

Gerar CSS progress bar components.

Mais de Design e Recursos

Entrada

Progress Bar CSS Gerador

progress barcssuidashboard

Saída

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

Ferramentas relacionadas

Accordion CSS Gerador

Gerar accordion panel CSS.

Avatar Stack CSS Gerador

Gerar overlapping avatar stack CSS.

Border Radius Gerador

Gerar border-radius CSS de corner values.

Floating Label Input CSS Gerador

Gerar floating label input CSS.

Focus Ring CSS Gerador

Gerar accessible focus-ring CSS.

Gradient Border CSS Gerador

Gerar gradient border CSS styles.