A Quick introduction to CSS gradients
Let’s get straight to it. CSS gradients are types of images in CSS3. They’re specified using the background-image property or the shorthand background property in CSS. They allow us to create smooth transitions between two or more specified colours without using actual images.
CSS gradients have excellent browser support.
By using CSS gradients instead of images we can reduce download times and bandwidth usage. In addition, because the gradient is pure CSS that is browser generated, objects with gradients look better when zoomed.
CSS gradients can be used to create some pretty impressive backgrounds patterns.
In this post I’ll cover the basics for linear, radial and repeating gradients.
Linear gradients are the most simple and commonly used gradients.
Those comma-separated colours are the type of colour you normally use: Hex, named colours, rgba, hsla, etc. You aren’t limited to just two colours either. You can have as many comma-separated colours as you want.
For more control, you can specify the direction of gradient. You can do it either by using simple terms like to left, to bottom right, or you can specify angles. Not declaring an angle will assume top-to-bottom (like in the examples above).
The angle is specified as an angle between a horizontal line and the gradient line, going counter-clockwise. In other words, 0deg creates a vertical gradient from the bottom to the top, while 90deg generates a left to right horizontal gradient.
All specified colours are always evenly spaced. You can change that by using colour stops. Colour stops are points along the gradient line that will have a specific colour at that location. The location can be specified as either a percentage of the length of the line, or as an absolute length. You don’t need to specify the stop position for the first and last colour (0%, 100%).
IE6-9 doesn’t support the CSS gradient syntax. To create a gradient for those browsers you can use the filter property.
It’s not the optimal solution but if you need to support the mentioned browsers and don’t want to fallback to an image or a full colour background you can give it a go.
Radial gradients start at a single point and emanate outwards. The syntax is similar to that for linear gradients, except you can specify the gradient’s ending shape (whether it should be a circle or ellipse) as well as its size. By default, the ending shape is an ellipse with the same proportions as the container’s box.
You can see how that gradient in the above example makes an elliptical shape (since the element is not a square). That’s the default (ellipse, as the first parameter), but you can also make it a circle.
In the example above you can see that the circle extends beyond the element. If you needed that circle to be entirely within the element, you could ensure that by specifying you want the fade to end by the “closest-side”. Other possible values are: closest-corner, farthest-corner, farthest-side.
The radial gradient doesn’t have to start at the center as you can specify a certain point by using “at” as part of the first parameter:
See the Pen Simple CSS radial gradient example (starting point) by Luka (@Xavka) on CodePen.
Just like linear gradients, radial gradients can have more than 2 colours and colour stops.
Browser support is largely the same as for linear gradients. The same thing applies for vendor prefixes. Use Autoprefixer to avoid any issues.
Repeating CSS Gradients
Repeating gradients can be linear and radial.
You can combine multiple gradients:
See the Pen Simple CSS repeating linear gradient (multiple gradients) by Luka (@Xavka) on CodePen.
This is the same as the other gradient types according to caniuse.com.
To wrap up, CSS gradients are an excellent replacement for background images. You can see from these few examples that they’re fairly straightforward but can be used to create some pretty complex patterns.
Have fun experimenting and creating something awesome!