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>
	</div>

view raw post-css-text-fragment-effect.html hosted with ❤ by GitHub

	#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 */
	}

view raw post-css-text-fragment-effect.css hosted with ❤ by GitHub

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.