Paper Cutout
3D & Depth · Static · pure CSS
Stacked offset layers in graduated paper tones with a soft lifted shadow, for a layered paper-craft cut-out. Tactile depth without a flat extrude.
How it works
Paper Cutout is a static 3d & depth text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Paper Cutout exposes 3 dedicated controls — Paper Hue, Layers and Step — 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
/* Paper Cutout — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Bricolage Grotesque', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 900;
letter-spacing: -1px;
text-transform: none;
}
.text-effect {
color: hsl(160 40% 93%);
text-shadow: 2.0px 2.0px 0 hsl(160 38% 86%), 4.0px 4.0px 0 hsl(160 38% 80%), 6.0px 6.0px 0 hsl(160 38% 74%), 8.0px 8.0px 0 hsl(160 38% 68%), 10.0px 10.0px 0 hsl(160 38% 62%), 12.0px 12.0px 0 hsl(160 38% 56%), 14.0px 14.0px 0 hsl(160 38% 50%);
filter: drop-shadow(8px 14px 11px hsl(160 30% 6% / 0.45));
}
Pure CSS — just add the .text-effect class to any element.
- Category
- 3D & Depth
- Type
- Static
- Browser support
- All modern browsers
- Capabilities
- pure