🌈

CSS Gradient Generator

Create and preview CSS linear and radial gradients. Copy ready-to-use CSS code.

Design Tools Runs locally No data sent
CSS gradient linear radial design
Gradient Type
Direction
●
Color Stops
CSS Output

What is CSS Gradient Generator?

Create and preview CSS linear and radial gradients. Add color stops, choose direction, and copy ready-to-use CSS code instantly.

How to Use Gradient Generator

  1. Choose whether you want a linear or radial gradient.
  2. Add or adjust the color stops until the blend looks right.
  3. Fine-tune the angle, position, or spread values in the live preview.
  4. Copy the generated CSS when you are ready to use it in your project.

Related Tools

🎨
Color Palette Generator
Generate complementary, analogous and triadic color palettes
 🎨
Color Picker
Convert colors between HEX, RGB, HSL, and CMYK
 ⚖️
WCAG Contrast Checker
Check WCAG AA and AAA color contrast ratios for accessibility
Understand CSS Gradients ▾
Example
Input Linear, 90°, stops: #6366F1 → #8B5CF6
Output background: linear-gradient(90deg, #6366F1, #8B5CF6);
Common Use Cases
  • Create hero background gradients for marketing pages
  • Test angle and stop adjustments before editing CSS files
  • Generate polished button or card backgrounds
  • Share exact gradient CSS with developers without manual conversion
Frequently Asked Questions
Do I need vendor prefixes like -webkit-linear-gradient?

No — all modern browsers (Chrome, Firefox, Safari, Edge) support unprefixed CSS gradients. Vendor prefixes are only needed for very old browsers (IE 9 and below).

Can I use transparent color stops?

Yes — use rgba() or hsla() colors with an alpha value of 0 to create fades to transparent. For example: rgba(99, 102, 241, 0) fades the indigo to invisible.

Can I use this gradient on text?

Yes — copy the gradient value and use it with CSS properties: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

What is the maximum number of color stops?

This tool supports up to 6 color stops. CSS itself has no hard limit — browsers support gradients with dozens of stops, though performance may vary.