Create Unique Image Fragmentation Effects with CSS Masks and Custom Properties

Creating Image Fragmentation Effects With CSS Masks and Custom Properties

The power of modern web design is truly amazing. With the help of modern tools, we can create some stunning visual effects with just a few lines of code. One such effect is ‘image fragmentation’ – where an image appears to be broken into several pieces. In this tutorial, we’ll be exploring how to create an image fragmentation effect using CSS masks and custom properties. We’ll be using code snippets from the excellent Codepen demonstration created by the talented Lea Verou. Let’s get started!

Create the HTML markup

The HTML markup for the image fragmentation effect is relatively simple. All you need is an image tag and some basic CSS classes. The following HTML generates our demo image fragmentation effect:

Apply the CSS Masks

CSS masks are used to hide or mask sections of content in HTML elements. In our case, we’ll use the “mask-image” property to create the fragment effect. We can define multiple masks if we want, so let’s create a repeating pattern of four fragment shapes. For our example, we’ll use a circle shape to isolate the image into four parts. .fragment { -webkit-mask-image: radial-gradient(circle, #FFF 20%, transparent 50%), radial-gradient(circle, #FFF 20%, transparent 50%), radial-gradient(circle, #FFF 20%, transparent 50%), radial-gradient(circle, #FFF 20%, transparent 50%); mask-image: radial-gradient(circle, #FFF 20%, transparent 50%), radial-gradient(circle, #FFF 20%, transparent 50%), radial-gradient(circle, #FFF 20%, transparent 50%), radial-gradient(circle, #FFF 20%, transparent 50%); }

Animate the Image Fragments

To animate the image fragments, we’ll use custom properties (CSS variables). Custom properties allow us to store values that can be used throughout the stylesheet. First, let’s define two custom properties at the top of the stylesheet. These will be used to control the animation of the image fragments: .fragment-container { --duration: 1s; --delay: 0.3s; } Next, we’ll apply the properties to the masks. This time, we’ll use the “mask-size” property to control the size of the fragments. By setting the size to 0%, we can make the fragments invisible: .fragment { -webkit-mask-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%; -webkit-mask-delay: var(--delay); -webkit-mask-duration: var(--duration); mask-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%; mask-delay: var(--delay); mask-duration: var(--duration); } Finally, we’ll use the “transition” property to control the animation of the image fragments. This allows us to animate the visibility of the fragments as they move into position: .fragment { transition: mask-size var(--duration) ease-in-out var(--delay); } And there you have it! With just a few lines of code, we’ve created a stunning image fragmentation effect using CSS masks and custom properties. To see more examples of image fragmentation effects, check out the full Codepen demo created by Lea Verou. Thanks for reading!