CSS: Adding Gradient Background with background: linear-gradient(...)
📝 Usage
This template demonstrates how to use the background: linear-gradient() property in CSS to add a gradient background.
📘 Explanation
The CSS code above uses the background: linear-gradient() property to create a gradient with two colors. You can freely change the direction and colors of the gradient.
🔹 Partial Code
A gradient background has been applied.
<div class="demo-area">
<p>A gradient background has been applied.</p>
</div>
<style>
.demo-area {
height: 200px;
text-align: center;
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
</style>
💻 Full Working Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS: Adding Gradient Background with background: linear-gradient(...)</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
.demo-area {
height: 200px;
text-align: center;
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
</style>
</head>
<body>
<div class="demo-area">
<p>A gradient background has been applied.</p>
</div>
</body>
</html>
🌈 Practical Techniques for Gradient Design
Background gradients using linear-gradient() are an effective method for adding visual depth and motion to modern web designs. When used appropriately, they can greatly enhance the overall impression of a website.
🎨 Color Coordination
Beyond the basic orange gradient (#ff7e5f to #feb47b), changing the direction from to right to to bottom or 45deg can create a completely different feel. You can achieve a calm tone with analogous colors, or create a pop look with complementary colors. It's also recommended to use tools like the CSS Gradient Generator to find your ideal gradient.
✨ Advanced Gradient Techniques
Multi-color gradients (linear-gradient(to right, red, yellow, green)) and position-defined color stops (linear-gradient(to right, red 0%, yellow 50%, green 100%)) allow for more complex expressions. Using transparent gradients like rgba(255,255,255,0) enables you to create natural overlays on top of images.
📱 Responsive Design Tips
On mobile devices, vertical gradients (to bottom) often appear more natural. Avoid using background-attachment: fixed to prevent performance issues during scrolling. For dark mode, adjust your gradient colors using @media (prefers-color-scheme: dark).
Gradients are powerful design tools, but overusing them can lead to a cluttered look. It's important to apply them strategically to key areas like headers or important sections. Also, ensure sufficient contrast to maintain text readability.