CSS Linear Gradients

What is a Linear Gradient?

Probably the most common and used type of gradient is the linear-gradient().
To create a linear gradient you must define at least two colors (or color-stops), and their value can be any type of color format (e.g. Hex, named colors, rgba, hsla, etc.).
The gradient direction can be specified as a 2 words value (e.g. "to top", "to bottom", "to left" and "to right") or it can be specified as an angle value (e.g. "0deg", "90deg"' "180deg").
If you don't declare any value, the default direction will be set "to bottom", meaning the gradient will go from top (color-stop-1) to bottom (color-stop-2).


background: linear-gradient(direction, color-stop1, color-stop2, ...);


background: linear-gradient(to bottom right, #7A7FBA, #11C37C);


Browser compatibility

IE Edge Firefox Chrome Safari Opera iOS Safari Opera
10+ 12+ 3.6+ 10+ 6.1+ 11.5 6.1+ x 95+ 95+

You can read more information about browser compatibility here. For maximum cross-browser compatibility and coverage, it's important that you use CSS prefixes. You can use this tool to append CSS prefixes to your CSS code.

CSS Linear Gradients Generator

You can easily generate your own linear gradients with the online css gradient generator.