CSS Gradient Generator

This tool will help you generate a linear, radial or conical CSS gradient. It allows gradients to be created using multiple layers to create some interesting patterns. Try out the different color palettes on the random gradient generator or see the examples to get a feel for what is possible.

Random Gradient Generator

Gradients

Gradient Settings For Shadow 1
x
y
°
Background Settings For Layer 1
This will only have an effect if the gradient size is less than 100%.
x
y
x
y
Preview
Examples

FAQ

Can I use gradients in all browsers?

Almost all browsers at least support the linear-gradient and radial-gradient values for properties that can take an image such as background.

The support for conic-gradient is almost as good, with the exception for Internet Explorer. Even if it is important to support Internet Explorer on your site, it may or may not be so important to show conic gradients.

What should I do to support as many browsers as possible?

Just put a fallback value before your preferred value, such as a solid color. You can even stack multiple fallbacks in (reverse) order of preference:

background: #48abe0;
background: linear-gradient(90deg, white 0%, #48abe0 100%);
background: conic-gradient(from 180deg, white 0%, #48abe0 100%);

How do I make my gradients look good?

Randomly generated gradients can easily look like something straight out of the 90's. Try generating a few gradients and use some different color patterns until you find one that looks reasonable. You can then remove any colours or layers that don't look right.