CSS gradient background
CSS Gradient background
Linear Gradients
A linear gradient is a gradual change of color along a straight line. In CSS, we can use the linear-gradient() function to create a linear gradient. This function accepts two parameters: the first specifies the direction of the gradient, and the second specifies the color of the gradient.
Example 1: Linear gradient from top to bottom
.linear-gradient1 {
background: linear-gradient(to bottom, #ff0000, #0000ff);
height: 200px;
}
<div class="linear-gradient1"></div>
Example 2: Linear gradient from top left to bottom right
.linear-gradient2 {
background: linear-gradient(to bottom right, #ff0000, #0000ff);
height: 200px;
}
<div class="linear-gradient2"></div>
Example 3: Linear gradient from left to right
.linear-gradient3 {
background: linear-gradient(to right, #ff0000, #0000ff);
height: 200px;
}
<div class="linear-gradient3"></div>
Example 4: Linear gradient from right to left
.linear-gradient4 {
background: linear-gradient(to left, #ff0000, #0000ff);
height: 200px;
}
<div class="linear-gradient4"></div>
Example 5: Multi-color linear gradient from top to bottom
.linear-gradient5 {
background: linear-gradient(to bottom, #ff0000, #00ff00, #0000ff);
height: 200px;
}
<div class="linear-gradient5"></div>
Radial Gradient
A radial gradient is a color effect that radiates from a central point. In CSS, we can use the radial-gradient() function to create a radial gradient. This function accepts two parameters: the first specifies the gradient shape, and the second specifies the gradient color.
Example 6: Circular Radial Gradient
.radial-gradient1 {
background: radial-gradient(circle, #ff0000, #0000ff);
height: 200px;
}
<div class="radial-gradient1"></div>
Example 7: Elliptical Radial Gradient
.radial-gradient2 {
background: radial-gradient(ellipse, #ff0000, #0000ff);
height: 200px;
}
<div class="radial-gradient2"></div>
Example 8: Radial gradient from the center to the edges
.radial-gradient3 {
background: radial-gradient(at center, #ff0000, #0000ff);
height: 200px;
}
<div class="radial-gradient3"></div>
Example 9: Radial gradient from the top left corner to the edges
.radial-gradient4 {
background: radial-gradient(at top left, #ff0000, #0000ff);
height: 200px;
}
<div class="radial-gradient4"></div>
Example 10: Radial gradient from the bottom right corner to the surrounding
.radial-gradient5 {
background: radial-gradient(at bottom right, #ff0000, #0000ff);
height: 200px;
}
<div class="radial-gradient5"></div>
Gradient Direction
In CSS, we can use keywords to indicate the direction of a gradient, such as to top for bottom-to-top and to right for left-to-right. In addition to keywords, we can also use angles to indicate the direction of a gradient.
Example 11: Using Angles to Indicate Gradient Direction
.gradient-angle {
background: linear-gradient(45deg, #ff0000, #0000ff);
height: 200px;
}
<div class="gradient-angle"></div>
Example 12: Using Keywords to Indicate Gradient Direction
.gradient-keyword {
background: linear-gradient(to top right, #ff0000, #0000ff);
height: 200px;
}
<div class="gradient-keyword"></div>
Gradient Colors
In CSS, we can use multiple colors to create gradient effects. In addition to specifying colors directly, we can also use transparency to create richer gradient effects.
Example 13: Creating a Gradient Using Transparency
.gradient-opacity {
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
height: 200px;
}
<div class="gradient-opacity"></div>
Example 14: Creating a Gradient Using Multiple Colors
.gradient-multiple {
background: linear-gradient(to right, #ff0000, #00ff00, #0000ff);
height: 200px;
}
<div class="gradient-multiple"></div>
Gradient Repeating
In CSS, we can use the repeating-linear-gradient() and repeating-radial-gradient() functions to create a repeating gradient effect.
Example 15: Repeating Linear Gradient
.repeating-linear {
background: repeating-linear-gradient(to right, #ff0000, #0000ff 20px);
height: 200px;
}
<div class="repeating-linear"></div>
Example 16: Repeating Radial Gradient
.repeating-radial {
background: repeating-radial-gradient(circle, #ff0000, #0000ff 20px);
height: 200px;
}
<div class="repeating-radial"></div>
Gradient Mask
In CSS, we can use gradient backgrounds as masks to achieve special effects, such as blur and transparency.
Example 17: Using a Gradient Background as a Mask
.gradient-mask {
background: linear-gradient(to right, #000, #000 50%, transparent 50%);
height: 200px;
}
<div class="gradient-mask"></div>
Gradient Animation
In CSS, we can use animation effects to create gradient transitions, making web pages look more vivid and interesting.
Example 18: Use animation to achieve gradient effect
@keyframes gradient-animation {
0% {
background: linear-gradient(to right, #ff0000, #0000ff);
}
50% {
background: linear-gradient(to right, #0000ff, #00ff00);
}
100% {
background: linear-gradient(to right, #00ff00, #ff0000);
}
}
.gradient-animation {
animation: gradient-animation 3s infinite;
height: 200px;
}
<div class="gradient-animation"></div>
Gradient Blend Modes
In CSS, we can use blend modes to layer multiple gradient backgrounds together to create more complex effects.
Example 19: Using Blend Modes to Overlay a Gradient Background
.gradient-blend {
background: linear-gradient(to right, #ff0000, #0000ff), linear-gradient(to bottom, #00ff00, #0000ff);
background-blend-mode: multiply;
height: 200px;
}
<div class="gradient-blend"></div>
Through the above examples, we can see the power and flexibility of CSS gradient backgrounds. By properly using gradient effects, we can add more beauty and creativity to web design.