Text Fragment Effect using CSS


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.

<img height=400px src="foo.jpeg">
<div id="text">Santorini
<div class="slash">/</div>
#text {
mix-blend-mode: multiply;
background-color: navy;
color: yellow;
/* more style */
.slash {
position: absolute;
left: 0; right: 0; bottom: 0; top: 0;
color: white;
pointer-events: none;
/* more style */

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.

The Author

Web developer and writer. @rpsthecoder in Twitter.