Related Articles

Related Articles

CSS | Combine background image with gradient overlay
  • Difficulty Level : Expert
  • Last Updated : 19 Feb, 2020

CSS gradients allow us to display smooth transitions between two or more colors. They can be added on top of the background image by simply combining background-image url and gradient properties.
Syntax:

  • For linear-gradient on top of the Background Image:
    element {
        background-image: linear-gradient(direction, 
         color-stop1, color-stop2, ...), url('url');
    }
  • For radial-gradient on top of the Background Image:
    element {
        background-image: radial-gradient(direction, 
        color-stop1, color-stop2, ...), url('url');
    }

Below examples illustrate the above approach:
Example 1: Background image with Linear gradient.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Background Image with Gradient</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href=
    <style>
        .my_bg {
            background-image: 
              linear-gradient(45deg, rgba(
                145, 146, 122, 0.62), rgba(
                  217, 91, 132, 0.58)), url(
            width: 100%;
            height: 280px;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div class="my_bg">
        This is my background!
    </div>
</body>
  
</html>

chevron_right


Output:

Example 2: Background image with Radial gradient.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Background Image with Gradient</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
          href=
    <style>
        .my_bg {
            background-image: radial-gradient(rgba(
              145, 146, 122, 0.62), rgba(217, 91, 132, 0.58)), url(
            width: 100%;
            height: 200px;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div class="my_bg">
        This is my background!
    </div>
</body>
  
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :