How to mask
Adding a mask to an image allows you to create custom shapes, add intricate designs, and enhance the visual appeal of your web pages.
Using Bootstrap
A detailed explanation of how the masks work in MDB:
-
Masks require
.bg-image
wrapper which sets a position to relative, overflow to hidden, and properly center the image. -
The inside
.bg-image
wrapper as the first child we place animg
element with the source link. -
Below is the actual mask. We set a color and opacity via
hsla
code and inline CSS. -
If you want to put a text on the image you have to place it within the
.mask
wrapper. To center it you have to use flex utilities.
Without mask
![Louvre Museum](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
Can you see me?
With mask
![Louvre Museum](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
Can you see me?
<div class="bg-image">
<img
src="path/to/your/image.jpg"
class="w-100"
alt="Louvre Museum"
/>
<div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)">
<div class="d-flex justify-content-center align-items-center h-100">
<p class="text-white mb-0">Can you see me?</p>
</div>
</div>
</div>
Gradient Using Bootstrap
Using Bootstrap, you can apply a gradient mask to an image. Here's an example:
bg-image
class contains the image and mask elements.w-100
class ensures the image spans the full width of its container.mask
div with a gradient background creates the masking effect.- The gradient is defined using
linear-gradient
with a 45-degree angle and two colors with 70% opacity.
![](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
<div class="bg-image">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
<div
class="mask"
style="
background: linear-gradient(
45deg,
hsla(168, 85%, 52%, 0.7),
hsla(263, 88%, 45%, 0.7) 100%
);
"
></div>
</div>
Using CSS
Here's how to create a gradient mask effect using plain HTML and CSS.
image-container
class contains the image and mask elements and ensures the mask is positioned relative to the image.full-width-image
class ensures the image spans the full width of its container.gradient-mask
class withposition: absolute
places the mask over the image, covering it entirely.- The gradient background is created using
linear-gradient
with a 135-degree angle and two colors with 70% opacity.
![City Image](https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp)
<div class="image-container">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="full-width-image" alt="City Image">
<div class="gradient-mask"></div>
</div>
.image-container {
position: relative;
width: 100%;
}
.full-width-image {
width: 100%;
height: auto;
}
.gradient-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
hsla(168, 85%, 52%, 0.7),
hsla(263, 88%, 45%, 0.7) 100%
);
}