CSS gradient generator

Pick your colors and direction, then copy the CSS.

Questions

How do I use the gradient in CSS?

Copy the background line into your stylesheet, for example on a section or button. Gradients work as background-image, so they can be layered with other backgrounds.

What is the difference between linear and radial gradients?

A linear gradient changes color along a straight line at the angle you choose. A radial gradient spreads out from the center in a circle or ellipse.

More color tools

• Color pickerPick any color and get its HEX, RGB, HSL and CMYK codes
• Hex to RGB converterTurn a hex code into RGB values
• RGB to hex converterTurn red, green and blue values into a hex code
• Hex to HSL converterHue, saturation and lightness from a hex code
• Hex to CMYK converterPrint-ready CMYK percentages from a hex code
• Color contrast checkerWCAG contrast ratio for text and background colors
• Color mixerBlend two colors and see every step in between
• Image color pickerUpload a photo and pick colors from it