CSS Backgrounds
Quickly copy CSS background properties to enhance the look and feel of your website. Whether you need a solid color, gradient, image, or pattern, we've got you covered.
Solid color
.solid-color {
background-color: #f0f0f0;
}
Gradient
.gradient {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
Image background
.image-background {
background-image: url('path/to/image.jpg');
background-size: cover;
background-position: center;
}
Pattern background
.pattern-background {
background-image: url('path/to/pattern.png');
background-repeat: repeat;
}
Video background
.video-background {
background: url('path/to/video.mp4') no-repeat center center;
background-size: cover;
}
Fixed Background
.fixed-background {
background-attachment: fixed;
background-image: url('path/to/fixed-background.jpg');
}
Parallax background
.parallax-background {
background-attachment: scroll;
background-image: url('path/to/parallax-background.jpg');
}
Overlay background
.overlay-background {
background-color: rgba(0, 0, 0, 0.5);
}
Blurred background
.blurred-background {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.8);
}
Transparent background
.transparent-background {
background-color: rgba(255, 255, 255, 0.5);
}