Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to place image or video inside silhouette?
The silhouette effect creates visually striking designs by placing images or videos inside the outline of a shape, person, or object. Using CSS's mix-blend-mode property, we can blend content with silhouette backgrounds to achieve this creative effect.
Syntax
selector {
mix-blend-mode: value;
}
Possible Values
| Value | Description |
|---|---|
normal |
No blending (default) |
multiply |
Multiplies colors, creating darker results |
screen |
Inverts, multiplies, and inverts again for lighter results |
darken |
Keeps the darkest color from each channel |
Example 1: Basic Mix-Blend Mode
Here's how mix-blend-mode works with overlapping colored circles
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 200px;
height: 150px;
margin: 20px;
}
.circle {
border-radius: 50%;
width: 80px;
height: 80px;
position: absolute;
mix-blend-mode: screen;
}
.circle1 {
background: red;
top: 0;
left: 0;
}
.circle2 {
background: yellow;
top: 0;
left: 40px;
}
.circle3 {
background: blue;
top: 40px;
left: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
</div>
</body>
</html>
Three overlapping circles (red, yellow, blue) blend together using screen mode, creating lighter colors where they intersect.
Example 2: Image in Silhouette Effect
This example demonstrates placing an image inside a silhouette using mix-blend-mode: screen
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f0f0;
}
.silhouette-container {
position: relative;
width: 300px;
height: 300px;
background: black;
border-radius: 50%;
overflow: hidden;
}
.content-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<div class="silhouette-container">
<img src="/images/nature.jpg" alt="Nature" class="content-image">
</div>
</body>
</html>
A circular black silhouette with a nature image blended inside it, creating the effect of the image appearing within the silhouette shape.
Key Points
- Screen Mode: Most commonly used for silhouette effects as it lightens the blend
- Positioning: Use absolute positioning to overlay images precisely
-
Object-fit: Use
coverto maintain aspect ratio within the silhouette - Browser Support: Supported in Chrome, Firefox, Safari, and Edge
Conclusion
The mix-blend-mode property enables creative silhouette effects by blending images with background shapes. Using screen mode with proper positioning creates striking visual designs that make content appear naturally within silhouette boundaries.
Updated on: 2026-03-15T15:43:51+05:30
305 Views
Advertisements