🌈

CSS Gradient Generator – Free Online

Generate CSS gradient code in real time with a live preview.

Type

Direction

Custom angle:

135°

Color Stops

Generated CSS Code

background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);

Full property (background-image) is also included

background-image: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);

Frequently Asked Questions

You can create CSS linear-gradient (directional) and radial-gradient (radial) styles with any number of color stops.

Yes. You can add, remove, and reorder color stops freely to create complex multi-color gradients.

Click the copy button next to the generated CSS code and paste it directly into your stylesheet.