8.1 Linear Gradients (linear-gradient)
Gradients in CSS let you create smooth transitions between two or more colors. You can use them for backgrounds, buttons, and other elements to add some visual depth and appeal. There are two main types of gradients in CSS: linear (linear-gradient) and radial (radial-gradient).
Linear gradient creates a smooth transition between colors along a straight line. The direction of the line and the color transitions can be precisely adjusted.
Syntax:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
Where:
direction: the direction of the gradient. It can be specified with an angle (like45deg) or keywords (to right,to bottom, etc.)color-stop: defines the color and its position in the gradient
Example 1: Simple linear gradient
This example creates a gradient that transitions from red to blue from left to right:
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to right, red, blue);
}
Example 2: Linear gradient with an angle
In this example, the gradient goes at a 45-degree angle from yellow to green:
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(45deg, yellow, green);
}
Example 3: Linear gradient with multiple colors
This example shows a gradient going from top to bottom, smoothly transitioning through four colors: red, yellow, green, and blue:
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to bottom, red, yellow, green, blue);
}
Example 4: Linear gradient with control points
This example sets control points to determine the exact placement of each color in the gradient:
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
}
8.2 Radial Gradients (radial-gradient)
Radial gradient creates a smooth transition between colors radiating from a central point or a specified point. The gradient expands in a circular or elliptical pattern.
Syntax:
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
Where:
shape: the shape of the gradient (circleorellipse)size: the size of the gradient (closest-side,farthest-side,closest-corner,farthest-corner)position: the center position of the gradient (can be specified in pixels, percentages, or keywords likecenter,top,left, etc.)color-stop: defines the color and its position in the gradient
Example 1: Simple radial gradient
In this example, a radial gradient starts from the center of a circle, transitioning from red to blue:
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle, red, blue);
}
Example 2: Radial gradient with different position
In this example, the center of the radial gradient is offset to the top-left corner, creating a transition from yellow to green:
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle at top left, yellow, green);
}
Example 3: Radial gradient with multiple colors
This example shows a gradient starting from the center of a circle, smoothly transitioning through four colors: red, yellow, green, and blue:
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle, red, yellow, green, blue);
}
Example 4: Radial gradient with control points
This example sets control points to determine the exact placement of each color in the gradient:
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle at center, red 0%, yellow 25%, green 50%, blue 100%);
}
8.3 Complex Gradient Examples
Example 1: Linear gradient with transparency
This example uses transparency to create a gradient from semi-transparent red to semi-transparent blue:
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
}
Example 2: Radial gradient with sizes
This example creates an elliptical radial gradient that fills the closest side of the element:
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(ellipse closest-side, red, blue);
}
Example 3: Creating gradients for buttons
Gradients can make buttons more appealing. This gradient goes from top to bottom, transitioning from light green to dark green, giving the button a sense of volume and depth:
<button type="button" class="button">Button</button>
.button {
background: linear-gradient(to bottom, #4caf50, #2e7d32);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
}
Benefits of using gradients:
1. Visual Appeal. Gradients allow you to create smooth transitions between colors, adding visual depth and appeal to design elements.
2. Flexibility. Gradients can be customized to create various effects, from simple transitions to complex multi-colored backgrounds.
3. Support for Responsive Design. Gradients adapt easily to different screen sizes and resolutions, making them handy for creating responsive web designs.
GO TO FULL VERSION