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 create a responsive cutout/knockout text with CSS?
A responsive knockout text creates a cutout effect where text appears to be carved out of a surface, revealing the background image behind it. The text automatically adjusts to different screen sizes, making it truly responsive.
Syntax
selector {
mix-blend-mode: multiply;
background-color: white;
font-size: viewport-units;
}
Key Properties for Knockout Text
| Property | Purpose |
|---|---|
mix-blend-mode |
Creates the knockout effect by blending text with background |
background-color |
White background allows the blend mode to work |
font-size: vw |
Viewport units make text responsive to screen size |
transform: translate(-50%, -50%) |
Centers the text perfectly on the background |
Example: Responsive Knockout Text
The following example demonstrates how to create responsive knockout text that reveals a forest background image −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
}
.image-container {
background-image: url("https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
background-size: cover;
background-position: center;
position: relative;
height: 400px;
width: 100%;
}
.knockout-text {
background-color: white;
color: black;
font-size: 12vw;
font-weight: bold;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: multiply;
padding: 20px;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="image-container">
<div class="knockout-text">FOREST</div>
</div>
</body>
</html>
A forest background image appears with "FOREST" text cut out/knocked out from it, revealing the forest image through the text. The text scales responsively with the viewport size.
How It Works
The knockout effect is achieved through these key steps:
-
Background Image: Set using
background-imagewithbackground-size: coverfor responsive scaling -
White Text Background: Essential for the
mix-blend-mode: multiplyto work properly -
Viewport Units: Using
vwunits makes the text size responsive to screen width -
Blend Mode:
multiplyblends the white background with the image, creating transparency -
Perfect Centering:
transform: translate(-50%, -50%)centers the text regardless of its size
Conclusion
Responsive knockout text combines CSS blend modes with viewport units to create an eye-catching cutout effect. The key is using mix-blend-mode: multiply with a white background and responsive font sizing with viewport units.
Updated on: 2026-03-15T14:54:34+05:30
343 Views
Advertisements