Foil Crinkle
Metallic & Holographic · Static · pure CSS
A sheet of stamped metal foil crushed into paper: a fixed turbulence bump map feeds twin diffuse and specular lights so patchy bright and dark facets scatter across the crumpled surface, poured through the letters via background-clip:text. Two hard zero-blur shadows press a light rim and a dark trough into the page for a genuine debossed impression — gold, silver or copper, static and legible on light or dark.
How it works
Foil Crinkle is a static metallic & holographic text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Foil Crinkle exposes 5 dedicated controls — Foil, Crinkle, Facets, Deboss and Seed — 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
/* Foil Crinkle — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Major Mono Display', monospace (load from Google Fonts).
*/
.text-effect {
font-family: 'Major Mono Display', monospace;
font-weight: 900;
letter-spacing: 4px;
text-transform: none;
}
.text-effect {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22text-effect-crinkle%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.021%22%20numOctaves%3D%223%22%20seed%3D%225%22%20stitchTiles%3D%22stitch%22%20result%3D%22n%22%2F%3E%3CfeDiffuseLighting%20in%3D%22n%22%20surfaceScale%3D%226%22%20diffuseConstant%3D%221.15%22%20lighting-color%3D%22%23f2b52e%22%20result%3D%22d%22%3E%3CfeDistantLight%20azimuth%3D%22235%22%20elevation%3D%2238%22%2F%3E%3C%2FfeDiffuseLighting%3E%3CfeSpecularLighting%20in%3D%22n%22%20surfaceScale%3D%226%22%20specularConstant%3D%221.47%22%20specularExponent%3D%2210.3%22%20lighting-color%3D%22%23fff3c2%22%20result%3D%22s%22%3E%3CfeDistantLight%20azimuth%3D%22235%22%20elevation%3D%2252%22%2F%3E%3C%2FfeSpecularLighting%3E%3CfeComposite%20in%3D%22s%22%20in2%3D%22d%22%20operator%3D%22arithmetic%22%20k1%3D%220%22%20k2%3D%220.9%22%20k3%3D%221%22%20k4%3D%220%22%20result%3D%22lit%22%2F%3E%3CfeComponentTransfer%20in%3D%22lit%22%3E%3CfeFuncR%20type%3D%22linear%22%20slope%3D%221.45%22%20intercept%3D%22-0.18%22%2F%3E%3CfeFuncG%20type%3D%22linear%22%20slope%3D%221.45%22%20intercept%3D%22-0.18%22%2F%3E%3CfeFuncB%20type%3D%22linear%22%20slope%3D%221.45%22%20intercept%3D%22-0.18%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23694708%22%2F%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23text-effect-crinkle)%22%2F%3E%3C%2Fsvg%3E");
background-size: 240px 240px;
background-repeat: repeat;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(-2.5px -2.5px 0 rgba(255,236,180,.62)) drop-shadow(3.5px 3.5px 0 rgba(0,0,0,.95));
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Metallic & Holographic
- Type
- Static
- Browser support
- SVG lighting foil via data-URI background-image + background-clip:text (all modern browsers)
- Capabilities
- pure