CSS Gradient Generator

The CSS Gradient Generator allows you to generate the CSS code for a linear or radial gradient with up to five colors. You can use such a CSS gradient as a background image of an element or even as the border. Both you can see in the examples below.

To use this tool, you need to select at least two color values and check the active checkbox next to them. We preselected red and blue for you.

Colors
Linear Gradient

With the angle range selection, you can define the direction for the gradient from -180deg to 180deg.



Background

CSS Code

📋 Copy Code

Border

This is an example of a linear gradient used as a border.

CSS Code

📋 Copy Code

Text

Click to change demo text

CSS Code

📋 Copy Code
Radial Gradient



Background

CSS Code

📋 Copy Code

Border

This is an example of a radial gradient used as a border.

CSS Code

📋 Copy Code

Text

Click to change demo text

CSS Code

📋 Copy Code

Converting Colors

Converting Colors allows you to convert between 17 different color formats like RGB, CMYK, HSV, HSL, CIELab, Android, Decimal, and YUV.

Made with 💘, 🍺 and 🍫 by Andreas Zettl. If you have questions send me an email to info@convertingcolors.com!

Privacy Policy  ·  Imprint  ·  Cookie List & Settings  ·  Statistics

Menu

Support