Jagged Edges With CSS Masks

Building a jagged edge onto a banner image often leads developers down the path of embedding an SVG as a background data URI. That works, but it’s messy: the SVG markup is hard to read in CSS, needs careful quoting, and must match the background color of wherever it sits, or the effect breaks entirely.

Masking offers a cleaner approach. Instead of painting triangles that match the surrounding background over the banner, a CSS mask removes those sections from the image outright, letting whatever sits behind it show through naturally.

The Masking Model

CSS masks work by reading the alpha channel of a mask-image and applying that transparency to the element beneath. If you supply a mask where one half is opaque white and the other half is transparent, the masked element gets shredded in exactly those spots.

Browser support is largely in place for the basic operation, and it degrades gracefully. If a browser lacks mask support, the banner simply renders without the sawtooth effect—a perfectly acceptable fallback.

One catch: while support is broad, the current mask-* properties are largely still vendor-prefixed in Blink and WebKit. If you want the effect on Chrome or Safari, plan for -webkit- versions of every mask-related declaration.

Building the Mask With Gradients

Rather than hunting for a suitable image file, you can construct the sawtooth entirely in CSS using a linear gradient. A gradient that transitions from a filled top-left to a transparent bottom-left yields a triangular shape, which is all you need to start carving edges.

But a single triangle alone won't do the job. If you constrain a mask with mask-size so it only covers the bottom stripe, the remaining area is treated as fully transparent, masking out the entire image above it. To keep the banner visible, the mask has to cover the full height of the element while painting the sawtooth only at the bottom.

The solution stacks two gradients as mask-image sources:

  • The first is the triangular gradient, set to repeat-x and positioned at the bottom edge to form the jagged boundary.
  • The second is a full-size gradient that is transparent for the bottom stripe—just enough to avoid muddying the triangles—and opaque throughout the rest of the element.

Together, these produce a mask that is a solid rectangle with a repeating triangular cutout along its bottom edge. Applied as mask-image with the horizontal repeat configured, the banner gets a clean, serrated finish.