- CSS Linear Gradients
- Using Angles
- Using Multiple Color Stops
- CSS Radial Gradients
- Set Shape
- Previous Section
- Next Section
CSS gradients let you display smooth transitions between two or more specified colors.
CSS defines two types of gradients:
- Linear Gradients (goes down/up/left/right/diagonally)
- Radial Gradients (defined by their center)
CSS Linear Gradients
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
background-object: linear-gradient(direction, color-stop1, color-stop2, ...);
directions: to top, to bottom (default), to left, to right, to bottom right, to top left, etc.
If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).
background-object: linear-gradient(angle, color-stop1, color-stop2);
The angle is specified as an angle between a horizontal line and the gradient line.
Using Multiple Color Stops
background-object: linear-gradient(color-stop1, color-stop2, color-stop3);
CSS Radial Gradients
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
background-object: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, position is center, and color spacing is even.
Differently spaced color stops: background-object: radial-gradient(red 5%, yellow 15%, green 60%);
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
Copyright © 2021 Code 4 Tomorrow. All rights reserved. The code in this course is licensed under the MIT License. If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact firstname.lastname@example.org for inquiries.