CSS Multiple Backgrounds, Clip & Masking

Multiple Backgrounds

Normally, we apply one background (solid color, gradient, or image) to an element. But CSS lets you use multiple backgrounds by separating them with commas.

The first background listed will be on top, and each next one will be stacked behind it.

Example:

.multiple-bg {
  width: 400px;
  height: 200px;
  background: 
    url("https://www.transparenttextures.com/patterns/stardust.png") repeat, /* top background */
    linear-gradient(to right, #ff7e5f, #feb47b),                             /* middle layer */
    #000;                                                                      /* bottom layer */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: bold;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiple Backgrounds Example</title>
  <style>
    .multiple-bg {
      width: 400px;
      height: 200px;
      background: 
        url("<https://www.transparenttextures.com/patterns/stardust.png>") repeat, /* top background */
        linear-gradient(to right, #ff7e5f, #feb47b),                             /* middle layer */
        #000;                                                                      /* bottom layer */
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      font-weight: bold;
      text-align: center;
    }
  </style>
</head>
<body>

  <h2>Multiple Backgrounds</h2>
  <div class="multiple-bg">Multiple Backgrounds</div>

</body>
</html>

Output :

learn code with durgesh images

Background-clip

The background-clip property decides where the background should stop (its painting area).

Options

border-box → default. Background goes under the content, padding, and border.
padding-box → background only covers content + padding, not under the border.
content-box → background stays only inside the content area.
text (with webkit-background-clip) → background is clipped to the text shape.

Example :

.clip-demo {
  font-size: 50px;
  font-weight: bold;
  background: linear-gradient(to right, #43cea2, #185a9d);
  color: transparent;
  -webkit-background-clip: text;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Clip Example</title>
  <style>
    .clip-demo {
      font-size: 50px;
      font-weight: bold;
      background: linear-gradient(to right, #43cea2, #185a9d);
      color: transparent;
      -webkit-background-clip: text;
    }
  </style>
</head>
<body>

  <h2>Background-clip Example (Gradient Text)</h2>
  <div class="clip-demo">Gradient Text</div>

</body>
</html>

Output :

learn code with durgesh images

Background-origin

The background-origin property defines where the background image/gradient starts positioning from.

Options

border-box → image starts from the border edge.
padding-box → image starts from inside the padding.
content-box → image starts inside the content area only.

Example :

.origin-demo {
  width: 300px;
  height: 150px;
  padding: 30px;
  border: 10px solid #333;
  background: url("https://www.transparenttextures.com/patterns/dark-mosaic.png") no-repeat;
  background-origin: content-box;
  background-size: cover;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: bold;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Origin Example</title>
  <style>
    .origin-demo {
      width: 300px;
      height: 150px;
      padding: 30px;
      border: 10px solid #333;
      background: url("<https://www.transparenttextures.com/patterns/dark-mosaic.png>") no-repeat;
      background-origin: content-box;
      background-size: cover;
      color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      font-weight: bold;
      text-align: center;
    }
  </style>
</head>
<body>

  <h2>Background-origin Example</h2>
  <div class="origin-demo">Background-Origin</div>

</body>
</html>

Output :

learn code with durgesh images

CSS Masking & Clipping

These are advanced techniques to show/hide specific parts of an element.

CSS Clipping — `clip-path`

With clip-path, you can cut out shapes for elements (rectangles, circles, polygons, even SVG paths).

Example (Circle Clipping) :

.clip-shape {
  width: 250px;
  height: 250px;
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  clip-path: circle(50% at 50% 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Circle Clipping Example</title>
  <style>
    .circle-clip {
      width: 250px;
      height: 250px;
      background: linear-gradient(135deg, #ff7e5f, #feb47b);
      clip-path: circle(50% at 50% 50%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
      text-align: center;
      margin: 50px auto;
    }
  </style>
</head>
<body>

  <h2 style="text-align:center;">Circle Clipping Example</h2>
  <div class="circle-clip">Clip Circle</div>

</body>
</html>

Output :

learn code with durgesh images

Example (Polygon Clipping) :

.polygon-clip {
      width: 300px;
      height: 300px;
      background: linear-gradient(135deg, #43cea2, #185a9d);
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Triangle shape */
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
      text-align: center;
      margin: 50px auto;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Polygon Clipping Example</title>
  <style>
    .polygon-clip {
      width: 300px;
      height: 300px;
      background: linear-gradient(135deg, #43cea2, #185a9d);
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Triangle shape */
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
      text-align: center;
      margin: 50px auto;
    }
  </style>
</head>
<body>

  <h2 style="text-align:center;">Polygon Clipping Example (Triangle)</h2>
  <div class="polygon-clip">Clip Polygon</div>

</body>
</html>

learn code with durgesh images

CSS Masking — `mask-image`

Masking uses another image (or gradient) as a stencil.

White areas of the mask = visible.
Black areas = hidden.
Gray areas = partially visible (transparency).

Example :

.mask-demo {
      width: 300px;
      height: 200px;
      background: url("https://picsum.photos/id/1015/400/300") no-repeat center/cover;
      -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
      text-align: center;
      border-radius: 12px;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Masking Example</title>
  <style>
    .mask-demo {
      width: 300px;
      height: 200px;
      background: url("https://picsum.photos/id/1015/400/300") no-repeat center/cover;
      -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
      text-align: center;
      border-radius: 12px;
    }
  </style>
</head>
<body>

  <h2>Masking Example (mask-image)</h2>
  <div class="mask-demo">Mask Image</div>

</body>
</html>

Output :

learn code with durgesh images

CSS Handbook

CSS Handbook