CSS3 gradients allow you to create smooth transitions between two or more specified colors. CSS3 gradients come in two main types: linear gradients and radial gradients. Here are examples of both:
Linear Gradient:
A linear gradient creates a gradient effect along a straight line. You can specify the direction and colors for the gradient.
Example 1 – Vertical Linear Gradient:
background-image: linear-gradient(to bottom, #ff0000, #00ff00);
- This code creates a vertical linear gradient that goes from red (#ff0000) at the top to green (#00ff00) at the bottom.
Example 2 – Diagonal Linear Gradient:
background-image: linear-gradient(45deg, #ff0000, #00ff00);
- This code creates a diagonal linear gradient that goes from red at the top-left to green at the bottom-right.
Radial Gradient:
A radial gradient creates a gradient effect radiating from a central point.
Example 3 – Simple Radial Gradient:
background-image: radial-gradient(circle, #ff0000, #00ff00);
- This code creates a radial gradient in the shape of a circle, starting with red at the center and transitioning to green towards the edges.
Example 4 – Elliptical Radial Gradient:
background-image: radial-gradient(ellipse at center, #ff0000, #00ff00);
- This code creates an elliptical radial gradient with red in the center and green at the outer edges.
