Knockout Panel
Fill & Texture · Animated · pure CSS
The text is punched clean through a vivid sticker panel — a padded, rounded chip whose gradient sweeps, bursts, or spins behind the letters while the glyphs themselves read as bare holes to the page beneath. Three gradient styles and an optional slow drift keep the panel alive without ever touching the cut-out shape of the type.
How it works
Knockout Panel is an animated fill & texture text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Knockout Panel exposes 5 dedicated controls — Panel Hue, Gradient, Rounding, Drift and Drift Speed — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Knockout Panel — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Archivo Black', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Archivo Black', sans-serif;
font-weight: 900;
letter-spacing: 4px;
text-transform: uppercase;
}
.text-effect {
display: inline-block;
position: relative;
isolation: isolate;
overflow: hidden;
padding: 0.5em 1.05em;
border-radius: 0.57em;
color: #0a0a0a;
text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.4), 0 0 3px rgba(0, 0, 0, 0.25);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.text-effect::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(125deg, hsl(316 92% 56%) 0%, hsl(358 90% 50%) 52%, hsl(244 88% 62%) 100%);
background-size: 210% 210%;
background-position: 20% 30%;
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Fill & Texture
- Type
- Animated
- Browser support
- All modern browsers
- Capabilities
- pure