Language
Back

Design & Assets

Progress Bar CSS Generator

Generate CSS progress bar components.

Input

Progress Bar CSS Generator

progress barcssuidashboard
Output

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

Related tools

Cookie preferences

We use cookies for essential site features and, with your permission, analytics and advertising.