How to place an image or video inside a silhouette using CSS
How to Place an Image or Video Inside a Silhouette with CSS
You may have come across websites where you see an image or video displayed as a silhouette. A silhouette can be an image, an object, a person, or an animal, rendered in black, which outlines the subject. We can insert any image or video inside a silhouette so that the video or image appears in the silhouette’s colors.
In this article, we’ll look at how to place an image or video inside a silhouette.
How to Place an Object Inside a Silhouette
A silhouette is an image of an object or person represented by a solid shape in black or any other palette color. The property we’ll be using here will be the mix-blend property, which specifies how the content of a specific element will blend with its nearest parent element.
Syntax
The following is the syntax for using the mix-blend property:
mix-blend mode: =darken,multiply,normal;
Mix-blend modes have values like normal, multiply, screen, and darken, each of which changes the blend relationship with its nearest parent. Let’s look at an example to better understand this mix-blend property.
Example
In the example below, we create three containers and give them three different classes. Then, in the CSS, we change the width and height as well as the border radius to give them a circular shape, and then change the color of all the circles. The expected output code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of using the mix-blend property</title>
<style>
.round {
border-radius: 50%;
width: 79px;
mix-blend-mode: screen;
height: 79px;
position: absolute;
}
.round-one {
background: red;
}
.round-second {
left: 38px;
background: yellow;
}
.round-third {
left: 19px;
background: blue;
top: 39px;
}
.iso {
position: relative;
Isolation: isolate;
}
</style>
</head>
<body>
<div class="isolate">
<div class="round round-one"></div>
<div class="round round-two"></div>
<div class="round round-third"></div> </div>
</body>
</html>
As you can see, by using the mix-blend property, we’ve blended the upper circle with two different colors.
Now that we know how the mix-blend-mode property works, we’ll place an image or video inside a silhouette and ensure we have the necessary resources to do so. Let’s take a look at the code to see how we’ll insert an image or video inside a silhouette.
Example
In this example, we’ll add an image inside a silhouette image by using the mix-blend-mode property.
In this example, we first add a silhouette image and then the https://coder-cafe.com/wp-content/uploads/2025/09/images we want to blend with. After that, we surround them with divs and give them a class. After that, we go into the CSS and use the blend-mode property on the image we added and set its value to screen. Let’s see the output we will get using the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of using the mix-blend property</title>
<style>
.round {
border-radius: 50%;
width: 79px;
mix-blend-mode: screen;
height: 79px;
position: absolute;
}
.round-one {
background: red;
}
.round-second {
left: 38px;
background: yellow;
}
.round-third {
left: 19px;
background: blue;
top: 39px;
}
.iso {
position: relative;
Isolation: isolate;
} </style>
</head>
<body>
<div class="isolate">
<div class="round round-one"></div>
<div class="round round-two"></div>
<div class="round round-third"></div>
</div>
</body>
</html>
You can see in the output above that we added the silhouette image and then added another image. When we use the mix-blend-mode property, the image blends with the silhouette, making it look like one image, not two different https://coder-cafe.com/wp-content/uploads/2025/09/images.
Note – We can use the mix-blend-mode property with text, https://coder-cafe.com/wp-content/uploads/2025/09/images, and SVG. Browsers that support the mix-blend-mode property include Chrome, Edge, Safari, and Firefox.
Summary
The silhouette effect can be used to make websites more interactive and engaging using just one CSS property: mix-blend, which defines how content will blend with its nearest parent content and parent background.
In this article, we saw how to use CSS properties like the mix-blend-mode property to place an image or video in silhouette.