Combine Background Image with Gradient Overlay in CSSBackground images are good, gradients are good. Here's how to overlay gradients on top of background image, or combine gradients in CSS.
CSS gradients allow us to display smooth transitions between two or more colours. They can be added to the background image by combining background-image URL and gradient properties.
An example of this can be seen in the footer of this site. See, the low polygon background image is an SVG, and I've added a blue radial gradient to add depth.
CSS Background Images
The background-image CSS property specifies one or more background pictures for an element. The visuals are created by piling context layers on top of one another.
section {
background-image: url("images/sunset.png");
} You can layer background images to create a stack; the first layer specified is drawn as the uppermost layer.
section {
background-image: url("images/foreground.png"), url("images/background.png");
} CSS Gradients
CSS gradients were added in CSS3 and are now widely supported in browsers. Gradients are classified into three categories in CSS:
- Linear Gradients (descending/ascending/left/right/diagonally)
- Radial Gradients (determined by their centre)
- Conic Gradients (circled by a centre point)
The basic syntax for a linear-gradient is:
section {
background-image: linear-gradient(direction, color1, color2, ...);
} Direction is written in plain text in the format "to bottom left" or "to right". "to bottom" is the default if none is provided.
section {
background-image: linear-gradient(to right, #373B44, #4286f4);
}
The background-image CSS property can combine an image URL and gradient elements, so we can use the background-image layering to add a gradient to an image. Because the gradient is layered on top of the background image, it will completely cover and obscure it. The gradient colours MUST use an alpha (transparency) channel to fix this. You can either specify the colours using rgba(128, 128, 255, 0.4) or hex (#8080FF66).
Combine Background Image with Gradient Overlay in CSS
The basic syntax for adding gradients to background images is like this.
For linear-gradient on top of a background image:
section {
background-image: linear-gradient(direction, color-stop1, color-stop2, ...),
url('images/sunset.png');
} section {
background-image: linear-gradient(to right, #00000000, #000000FF), url('logo.png');
}
You can combine any number of gradients on the background image, each comma separated.
Using the site footer as an example
footer {
background-image:
radial-gradient(ellipse farthest-corner at 120% 150%,#0d9ddf 20%,transparent 60%),
url(lowpoly.svg);
background-color: #282828;
} Here's another example which creates a fantastic isometric pattern.
.isoback {
background-image:
linear-gradient(45deg, rgba(13, 0, 61,0.2) 0%, rgba(13, 0, 61,0.2) 16.667%,rgba(14, 79, 102,0.2) 16.667%, rgba(14, 79, 102,0.2) 33.334%,rgba(15, 158, 143,0.2) 33.334%, rgba(15, 158, 143,0.2) 50.001%,rgba(16, 198, 163,0.2) 50.001%, rgba(16, 198, 163,0.2) 66.668%,rgba(15, 119, 122,0.2) 66.668%, rgba(15, 119, 122,0.2) 83.335%,rgba(14, 40, 81,0.2) 83.335%, rgba(14, 40, 81,0.2) 100.002%),
linear-gradient(22.5deg, rgba(13, 0, 61,0.2) 0%, rgba(13, 0, 61,0.2) 16.667%,rgba(14, 79, 102,0.2) 16.667%, rgba(14, 79, 102,0.2) 33.334%,rgba(15, 158, 143,0.2) 33.334%, rgba(15, 158, 143,0.2) 50.001%,rgba(16, 198, 163,0.2) 50.001%, rgba(16, 198, 163,0.2) 66.668%,rgba(15, 119, 122,0.2) 66.668%, rgba(15, 119, 122,0.2) 83.335%,rgba(14, 40, 81,0.2) 83.335%, rgba(14, 40, 81,0.2) 100.002%),
linear-gradient(0deg, rgba(13, 0, 61,0.2) 0%, rgba(13, 0, 61,0.2) 16.667%,rgba(14, 79, 102,0.2) 16.667%, rgba(14, 79, 102,0.2) 33.334%,rgba(15, 158, 143,0.2) 33.334%, rgba(15, 158, 143,0.2) 50.001%,rgba(16, 198, 163,0.2) 50.001%, rgba(16, 198, 163,0.2) 66.668%,rgba(15, 119, 122,0.2) 66.668%, rgba(15, 119, 122,0.2) 83.335%,rgba(14, 40, 81,0.2) 83.335%, rgba(14, 40, 81,0.2) 100.002%),
linear-gradient(90deg, rgb(73, 73, 73),rgb(94, 94, 94));
} 
