TPToolpazar

Global Araç

Css Gradient Generator

Color stops

0%
100%

CSS

background: linear-gradient(to right, #0f766e 0%, #0ea5e9 100%);

Build linear, radial, or conic CSS gradients with any number of color stops. Live preview at full size, ready-to-paste CSS output, draggable position sliders. Add as many stops as you need — most UI gradients want 2–3, hero backgrounds often use 4–6.

Nasıl Kullanılır

  1. Pick a gradient type and direction.
  2. Click stop colors to edit, drag positions on the slider.
  3. + Add stop, × remove.
  4. Copy the generated CSS.

Sık Sorulan Sorular

Linear vs radial vs conic?

Linear: stops fade along a straight line (most common). Radial: stops fade from a center point outward (for spotlights, vignettes). Conic: stops sweep around a center like a clock face (for color wheels, pie chart effects).