CSS Gradient Generator

Design gradients and copy the CSS in seconds.

Loading…

Choose the gradient type, set the angle and add up to six color stops, each at its own position. The preview updates live and the CSS is ready to copy into your stylesheet. Need an image instead? Download the gradient as a PNG in Full HD, 4K, square or story size — perfect for wallpapers, backgrounds and social media.

How to create a CSS gradient

Step 1
Choose linear, radial or conic.
Step 2
Set the angle and the color stops.
Step 3
Copy the CSS or download the image.

Why use PhotoTools

Three types

Linear, radial and conic gradients.

Clean CSS

One line, ready to paste.

Wallpaper sizes

PNG up to 3840 × 2160.

Supported formats

Output

Frequently asked questions

Does the CSS work in every browser?

Linear and radial gradients work everywhere; conic gradients work in all current browsers.

Can I use more than two colors?

Yes, up to six color stops, and each one can sit anywhere along the gradient.

Is it free?

Yes. Browser tools on PhotoTools are free, unlimited and work without an account.

Color Palette GeneratorBuild a harmonious color scheme from one color.Color ConverterConvert a color code to every other format.Image Color PickerFind the exact color of any pixel in a picture.Color Contrast CheckerMake sure your text is readable for everyone.Color Palette from ImageTurn a photo into a color palette.Gradient from ImageTurn the colors of a photo into a gradient.