Gradient background color and images

You can check the live preview of the examples in the link below.

Live Preview →

Example 1

.example-1 {
  background-image: linear-gradient(230deg, #7f53ac 35%, #647dee 90%);
}

Example 2

.example-2 {
  background-image: linear-gradient(300deg, #045de9 25%, #09c6f9 90%);
}

Example 3

.example-3 {
  background-image: linear-gradient(315deg, #90d5ec 0%, #fc575e 74%);
}

Example 4

.example-4 {
  background-image: linear-gradient(315deg, #42378f 0%, #f53844 74%);
}

Please note that it’s a good practice to specify a background-color along with the background-image. It works as a fallback. If the gradient does not work for some reason on an old browser, the background-color will take place. See the following CSS as an example:

.example-4 {
  background-color: #42378f;
  background-image: linear-gradient(315deg, #42378f 0%, #f53844 74%);
}

Background image & color together (semi-transparent color on top of the image)

In this example, I have the background image first and then the background color on top of that image. Also, I used semi-transparent colors so you can see them both.

CSS

.container {
  background:
    linear-gradient(rgba(0, 0, 0, 0.45)),
    url("./img/bulb.jpg") no-repeat center;
  background-size: cover;
}

You need to specify at least two colors in order to make gradients. But in this example, I only used one color. Because as the title suggests, I only need a semi-transparent background color on top of the image.

The background is a shorthand that can hold five other CSS properties. Since I only need a semi-transparent color on top of the image, so I used 45% black color. But you can use any color and any opacity (less than 1).

Semi-transparent gradient colors on top of the image

If you like to implement semi-transparent background color over the image, you can do that by adding more colors by comma separating.

CSS

.container {
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(255, 0, 0, 0.6)),
    url("./img/bulb.jpg") no-repeat center;
  background-size: cover;
}

This is how you can make a semi-transparent gradient on top of the background image.

Extra Talks - How you can make your own gradient background color

There are three types of gradients: linear, radial & conic. In this post, I only used the first one (linear gradient).

For implementing gradient, you need the background-image property. Out of the box, there are numerous technics you can apply to create gradients. However, I want to make this super simple for you.

Inside the first bracket, the first value is the angle (degree), and then the comma separated by colors. You can ignore the percentage for simplicity. And it will also work. See the modified CSS below.

.example-4 {
  background-image: linear-gradient(345deg, #42378f, #f53844);
}

This angle or degree also accepts a negative value.

However, if you want to make it simpler one step more, you can skip the angle or degree (as you see below).

.example-4 {
  background-image: linear-gradient(#42378f, #f53844);
}

This will also work.

But if you do not specify any degree/angle for the gradient, the default is 180 degrees.

You can also specify more than two colors like this:

.example-4 {
  background-image: linear-gradient(#42378f, #f53844, #ff9800, #229241);
}

You can also specify a degree or angle in the above gradient. In my option, in most cases, 315 degrees works very well.

.example-4 {
  background-image: linear-gradient(315deg, #42378f, #f53844, #ff9800, #229241);
}

Use whatever option is easy for you. All these are valid CSS.

And it brings me to the end of this post.