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.

Controls

135
#667eea
0
#764ba2
100
#f093fb
50
Live Preview
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.

Related Tools & Services

GoDaddy.com

Website builder, domains and hosting.

Visit GoDaddy.com →

Hostinger

Web hosting to deploy your designs.

Visit Hostinger →
Back to CSS Generators