CSS Gradients
Linear Gradient - Top to Bottom (default):
background: linear-gradient(red, blue);
Linear Gradient - Left to Right:
background: linear-gradient(to right, red, blue);
Linear Gradient - Diagonal (starts at top left and goes to bottom right):
background: linear-gradient(to bottom right, red , blue);
Linear Gradient - Using Angles - You can define an angle, instead of the predefined directions: Example: 45°
background: linear-gradient(45deg, red, blue);
Radial Gradient - Evenly Spaced Color Stops (this is default):
background: radial-gradient(red, green, blue);
Radial Gradient - Set Shape - Circle (The default value is ellipse):
background: radial-gradient(circle, red, green, blue);
References and Resources:
