CSS Gradient Generator — Create Linear & Radial Gradients

CSS Gradient Generator — Design Gradients Visually

Create stunning CSS gradients with a live visual editor. Add as many color stops as you want, pick linear, radial, or conic gradients, adjust the angle, and copy the ready-to-use CSS code. Perfect for backgrounds, buttons, cards, and hero sections.

Gradient types

• Linear: colors blend along a straight line at any angle (0–360°)
• Radial: colors radiate outward from the center, as a circle or ellipse
• Conic: colors rotate around a center point (great for color wheels and pie-chart effects)

Features

• Unlimited color stops: add or remove colors freely
• Position control: slide each color to any position from 0% to 100%
• Angle control: rotate linear and conic gradients precisely
• Live preview: see your gradient update instantly
• Random button: generate a fresh color combination for inspiration
• Clean CSS output: copy a single line ready to paste

How to use the CSS

Copy the generated code and apply it to any element. For example:

.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}

Tips

• Two or three colors usually look cleaner than many
• For subtle backgrounds, use colors close together on the color wheel
• For vivid effects, use complementary colors
• Conic gradients are perfect for loading spinners and color pickers

Privacy

This tool runs entirely in your browser. Nothing is uploaded or stored.