Linear Gradient in CSS
Linear Gradients
CSS3 gradients enable you to display smooth transitions between two or more specified colors. To create a linear gradient, you must define at least two color stops.
What are Color Stops?
Colors stops are basically the colors among which you want to render smooth transitions. There is no limitation on color stops. We can add multiple color stops separated by a comma. We can set the direction of our linear gradient. The direction can be from left to right, top to bottom, bottom to top, right to left, and many more. We can also specify the angle of a linear gradient. By doing this, the linear gradient will start from that particular angle.
Syntax:-
Its syntax is:-
< style >
element{
background-image: linear-gradient(direction, color-stop1, ...);
}
< /style >
Further Explanation:-
| Value | Description |
|---|---|
| direction | Defines a starting point and a direction angle with gradient effects. |
| color-stop1,... | Color stops are the colors that we want to render with smooth transitions. It consists of a color value, with an optional stop position. |
Code Explanation
All Tutorials related to CSS3
CSS3 Intro
Vendor Prefixes
Border Radius Property
Box Shadow Property
Transparency
Text Shadow
Pseudo Classes
Pseudo Elements
Word Wrap
@Font-Face
Linear Gradients
Radial Gradient
Background Size
Background Clip
Opacity
Transitions
Transform Rotate
Translate Skew
Scale and Multiple
Animations
Animation Properties
3D Transform
CSS Filters 1
CSS Filters 2
CSS Filter 3
