Rough CSS borders with SVG filters feTurbulence and feDisplacementMap

Here's a really cool technique from Daniel Jones that uses the feTurbulence and feDisplacementMap filters in SVGs to create rough borders:

How to make rough edges with CSS and SVGs

Ever wanted to add some rad rough edges to your HTML elements? This quick tip guide has you covered, we utilise CSS filters and SVG’s to create a re-usable utility class.

Daniel Jones

Here's a quick Codepen that I made for a proof of concept for a client project:

You can find out more about the filters on MDN:

<feDisplacementMap> - SVG: Scalable Vector Graphics | MDN

The <feDisplacementMap> SVG filter primitive uses the pixel values from the image from in2 to spatially displace the image from in.

MDN Web Docs

<feTurbulence> - SVG: Scalable Vector Graphics | MDN

The <feTurbulence> SVG filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. The resulting image will fill the entire filter primitive subregion.

MDN Web Docs

For a more in depth look at how you can use SVG filters, check out this excellent article that Sara Soueidan wrote for Codrops:

SVG Filter Effects: Creating Texture with <feTurbulence> | Codrops

feTurbulence is one of the most powerful SVG filter primitives. The specification defines this primitive as follows: Thi

CodropsSara Soueidan