CSS — Lesson 14
Backgrounds & Gradients
Enhancing designs with background images and gradients.
Backgrounds & Gradients
Background properties let you add images, gradients, and colors to element backgrounds.
Background Basics
.hero {
background-color: #f0f0f0;
background-image: url('image.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
Linear Gradients
.gradient-1 {
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
}
.gradient-2 {
background: linear-gradient(135deg, #667eea, #764ba2);
}
Radial Gradients
.gradient-circle {
background: radial-gradient(circle, #fff, #333);
}
Shorthand
.bg {
background: #fff url('img.png') no-repeat center / cover;
}
Tip: Use gradients for hero sections, buttons, and cards. They load faster than image files and scale perfectly at any resolution.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →