Almost all of the text and box fragment designs I’ve seen online use SVG, and maybe even JavaScript, which is great β and resourceful β but I wanted a simpler method (by simpler, I mean CSS π) to show a plain fragment effect π
Every time a crack or a hole has to appear on a design, my mind churns up the various logics behind creating a CSS knockout text effect to see if I can reuse any of them.
One of the methods for the knockout text effect uses the CSS property, mix-blend-mode
, to transparentize the text of an element.
I’m not going to explain how mix-blend-mode
works in here as you can read about the same and its use in creating a knockout text effect in this CSS Tricks article.
If you already know how mix-blend-mode
works, then below is the code I used in the demo showcased in this post (at the end) where I’m using mix-blend-mode
to knockout a slanted space over a text to create faux-fragmentation.
On top of an image, I added some text and a white coloured slash, then applied mix-blend-mode: multiply;
to them, causing the white slash to turn transparent and break the text.
Tip: Use pointer-events: none;
on the slash so that it doesn’t obstruct the user selection of the text (yes, it’s selectable!)
Note: You can use different textual characters to create different fragment shapes, or to just punch some bizarre shaped holes into a text, just make sure the text remains readable. PS: there’s a wide array of quirky Webdings.