🌈

CSS Gradient Generator — Create Beautiful CSS Gradients Free

Generator

Create stunning CSS linear, radial and conic gradients with a live preview. Add color stops, adjust angle and copy CSS code instantly. Free online gradient generator.

✓ Free✓ No Sign-up✓ Browser-based

Presets

Type

Angle: 135°

Color Stops

CSS Code

background: linear-gradient(135deg, #CE2626, #7DAACB);

/* Also try: */
background-image: linear-gradient(135deg, #CE2626, #7DAACB);

About the CSS Gradient Generator — Create Beautiful CSS Gradients Free

Our free CSS gradient generator lets you create beautiful linear, radial and conic gradients with a real-time visual preview. Customise gradient type, angle, color stops and add as many colors as you like. Choose from 8 preset palettes — Sunset, Ocean, Forest, Purple, Fire, Cool Blue, Peach and Mint — or build from scratch. The complete CSS background property is generated automatically and updates live as you edit. Copy with one click and use directly in your stylesheet.

How to Use the CSS Gradient Generator — Create Beautiful CSS Gradients Free

1
Choose gradient type — Linear, Radial or Conic.
2
Adjust the angle for linear and conic gradients.
3
Add, remove or change color stops using the color pickers.
4
Or click a preset palette.
5
Copy the CSS code from the panel at the bottom.

Frequently Asked Questions

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colors, created with CSS without image files. Gradients are lightweight, resolution-independent and ideal for backgrounds, buttons and overlays.