Torn Edge CSS

Author Posts


Hey guys! I have a job that needs a kind of ‘torn edge’ on certain columns, kinda like a rough paper tear.

Like the orange column in this codepen, but using CSS whereas this guy is using ::after and an SVG.

Anyone have a snippet or insight on creating one of these and applying it sitewide to a col-class?


Hey Andrew,

I order to get a resolution that matches your codepen example, you might need to use a repeating background image. I found a pure CSS clip-path example but it’s not super realistic.


You must login or register to reply to this topic.