CSS 🎨 Backgrounds

CSS Gradient Generator

CSS gradients let you create smooth transitions between colors directly in CSS — no images needed. This generator supports linear, radial, and conic gradients with up to 3 customizable color stops.

Live Preview
135
#667eea
0
#764ba2
100
#f093fb
50
Generated CSS
Adjust parameters above to generate CSS...

How to Use

  1. Choose the gradient type: linear, radial, or conic.
  2. Adjust the angle for linear/conic gradients (0–360°).
  3. Pick your colors using the color pickers.
  4. Set percentage stops for each color to control where the transition occurs.
  5. Copy the generated CSS and paste it into your stylesheets.

How It Works

Gradients are defined using background: linear-gradient() or radial-gradient(). Each color stop is specified as color percentage%. The angle controls the direction of the gradient transition.
Back to CSS Generators