CSS GRADIENT
Let's look at each type with examples:
1. Linear Gradients
Linear gradients create color transitions along a straight line, usually from top to bottom or left to right. They are made using the linear-gradient function and can have multiple color stops.
linear-gradient(direction, color-stop1, color-stop2, ...);Example 1 - Vertical Linear Gradient (Top to Bottom):
background: linear-gradient(to bottom, #ff0000, #00ff00);
Example 2 - Horizontal Linear Gradient (Left to Right):
background: linear-gradient(to right, #ffcc00, #33cc33);
Example 3 - Diagonal Linear Gradient (Top-left to Bottom-right):
background: linear-gradient(to bottom right, #3366cc, #cc33ff);
Example 4 - Multiple Color Stops:
background: linear-gradient(to right, #ff0000, #ffff00, #00ff00);
2. Radial Gradients
Radial gradients create a circular or elliptical gradient effect, radiating from a single point. They are defined using the radial-gradient function and can also include multiple color stops.
radial-gradient(shape size at position, color-stop1, color-stop2, ...);
Example 1 - Basic Radial Gradient (Center to Edges):
background: radial-gradient(circle, #ff9900, #ffcc00);
Example 2 - Elliptical Radial Gradient (Center to Edges):
background: radial-gradient(ellipse, #ff3366, #ff6699);
Example 3 - Radial Gradient at Specific Position:
background: radial-gradient(at 30% 70%, #00ccff, #99cc00);
Example 4 - Multiple Color Stops:
background: radial-gradient(circle, #ff0000, #ffff00, #00ff00);
These are basic examples of using linear and radial gradients in CSS. You can customize the direction, size, position, and colors to create different gradient effects. Gradients are a flexible tool for enhancing the visual appeal of web designs.
0 Interaction
519 Views
10 Likes
×
