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).
Syntax
background: linear-gradient(direction, color-stop1, color-stop2, ...);
Example
background: linear-gradient(to bottom right, #7A7FBA, #11C37C);
Result
Browser compatibility
| IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Chrome Android |
|---|---|---|---|---|---|---|---|---|---|
| 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.