OneTaskBy Tim King · Updated
Torn Paper Edge
Jagged Torn Top, Bottom or Both Edges on Cards and Sections, Copy Clip-Path
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Torn Paper Edge works
This torn paper edge generator cuts a ripped, uneven edge into the top, bottom or both sides of a card, like a page torn from a notebook. Set the number of tears, how deep they go and the paper colour, then copy the HTML and CSS.
Torn edges add a hand-made feel to notes, scrapbook layouts, testimonials and section breaks.
How the torn paper edge works
The edge is a clip-path polygon with a point every few percent across the width. Each point dips
by a random amount up to the tear depth, using a seeded generator, so the same pattern number always
gives the same tear. Padding grows with the depth so the text never gets clipped.
Adding a shadow
A normal box-shadow is cut off by the clip path, so the card uses filter: drop-shadow instead.
The filter follows the torn outline, giving a soft shadow under every jagged point.
FAQ
How do I get a different tear pattern?
Change the Pattern slider. Each number gives a new random tear that stays the same every time you use it, so you can try a few and keep the one you like.
Can I put a photo on torn paper?
Yes. Put an image inside the card or set it as the background. The clip path cuts the image along the same jagged edge, which suits scrapbook and collage designs well.
Does the torn edge work on wide sections?
Yes. The points are placed in percentages, so the tear stretches with the element. On very wide sections, raise the number of tears to keep them small and natural looking.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Clip-Path Generator
Build clip-path shapes — polygons, stars, circles, chevrons — visually.
CSS Divider Generator
Slanted, curved, zigzag and wave section dividers in pure CSS.
CSS Wave Generator
Wavy section edges from an inline SVG path, copied as CSS.
CSS Border Generator
Build a border shorthand with any style, side and radius.
CSS Shapes Generator
Classic single-element CSS shapes with size and colour controls.