Design et Ressources

Range Slider CSS Générateur

Générer custom range slider CSS.

Plus dans Design et Ressources

Entrée

Range Slider CSS Générateur

range sliderinput rangecssform

Sortie

Range Slider CSS Generator

.range {
  width: min(100%, 320px);
  appearance: none;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb 0 62%, #cbd5e1 62% 100%);
}

.range::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: white;
  border: 3px solid #2563eb;
  box-shadow: 0 8px 18px rgba(15,23,42,0.15);
}

Live preview

Live canvas

Outils similaires

Floating Label Input CSS Générateur

Générer floating label input CSS.

Toggle Switch CSS Générateur

Générer CSS toggle switch styles.

Box Shadow Générateur

Générer CSS box-shadow values avec custom offsets et blur.

Scrollbar CSS Générateur

Générer custom scrollbar CSS.

Accordion CSS Générateur

Générer accordion panel CSS.

Avatar Stack CSS Générateur

Générer overlapping avatar stack CSS.