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.