How does the torn edge work in CSS?

The block is cut with clip-path: polygon(). Each torn edge gets a row of points at even spacing along its length and a random inward offset of up to the tear depth, so the straight edge becomes a jagged one. Untorn edges stay perfectly straight.

Why is the drop shadow on a separate wrapper?

clip-path also clips the element's own box-shadow, so a shadow on the torn element would be cut off. Putting filter: drop-shadow() on a parent follows the jagged outline instead, which is why the HTML has a .torn-paper-wrap around .torn-paper when the shadow is on.

What does the shuffle button and the number next to it do?

The tear is generated from a seed number, so the same seed always produces the same edge. Shuffle picks a new seed. The CSS you copy already contains the final coordinates, so the page you paste it into does not need any script and the edge never changes between loads.

Does the torn edge stay correct when the block is resized?

Points are placed in percentages along each edge and the tear depth is in pixels, so the jagged shape stretches with the width while the depth stays constant. If you make the block much wider than the preview, raise the detail setting so the teeth do not look too long and spiky.

Can I tear the corners differently or add a paper texture?

The corners follow the torn edges next to them. For a paper texture, put a background-image or a noise layer on the .torn-paper element in addition to the color; it is clipped along with the rest of the block.

CSS TORN PAPER EDGE GENERATOR

Rip one or more edges of any block into a torn-paper outline and copy the CSS.

In short

Generate the CSS for a ripped, torn-paper edge on any block: choose which sides are torn, how deep and how fine the tear is, and shuffle the random pattern until it looks right. You get a ready-to-paste .torn-paper class that uses a clip-path polygon, plus an optional drop-shadow wrapper, with a live preview. It runs in your browser and nothing is uploaded.

Torn edges

Tear depth: 16px

Detail (points per edge): 24

Width: 360px

Height: 200px

Paper colorDrop shadow

.torn-paper-wrap {
  filter: drop-shadow(0 6px 8px rgb(0 0 0 / 0.35));
}

.torn-paper {
  width: 360px;
  max-width: 100%;
  height: 200px;
  background: #f2e9dc;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15.5px), 95.83% calc(100% - 15.4px), 91.67% calc(100% - 9.5px), 87.5% calc(100% - 13.4px), 83.33% calc(100% - 15.4px), 79.17% calc(100% - 14.3px), 75% calc(100% - 10.4px), 70.83% calc(100% - 8.5px), 66.67% calc(100% - 1.9px), 62.5% calc(100% - 14.7px), 58.33% calc(100% - 10.5px), 54.17% calc(100% - 13.2px), 50% calc(100% - 8.8px), 45.83% calc(100% - 14.7px), 41.67% calc(100% - 10.9px), 37.5% calc(100% - 0.7px), 33.33% calc(100% - 5.4px), 29.17% calc(100% - 10.1px), 25% calc(100% - 3px), 20.83% calc(100% - 5.2px), 16.67% calc(100% - 14.6px), 12.5% calc(100% - 2.1px), 8.33% calc(100% - 2.2px), 4.17% calc(100% - 5.7px), 0 calc(100% - 5.3px));
}

Example output (default settings)

CSS

.torn-paper-wrap {
  filter: drop-shadow(0 6px 8px rgb(0 0 0 / 0.35));
}

.torn-paper {
  width: 360px;
  max-width: 100%;
  height: 200px;
  background: #f2e9dc;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15.5px), 95.83% calc(100% - 15.4px), 91.67% calc(100% - 9.5px), 87.5% calc(100% - 13.4px), 83.33% calc(100% - 15.4px), 79.17% calc(100% - 14.3px), 75% calc(100% - 10.4px), 70.83% calc(100% - 8.5px), 66.67% calc(100% - 1.9px), 62.5% calc(100% - 14.7px), 58.33% calc(100% - 10.5px), 54.17% calc(100% - 13.2px), 50% calc(100% - 8.8px), 45.83% calc(100% - 14.7px), 41.67% calc(100% - 10.9px), 37.5% calc(100% - 0.7px), 33.33% calc(100% - 5.4px), 29.17% calc(100% - 10.1px), 25% calc(100% - 3px), 20.83% calc(100% - 5.2px), 16.67% calc(100% - 14.6px), 12.5% calc(100% - 2.1px), 8.33% calc(100% - 2.2px), 4.17% calc(100% - 5.7px), 0 calc(100% - 5.3px));
}

HTML

<div class="torn-paper-wrap">
  <div class="torn-paper">
    <!-- your content here -->
  </div>
</div>

How to make a torn paper edge

1
Switch on the edges you want torn: top, right, bottom, or left.
2
Set the tear depth and the detail (how many points are along each edge), then press Shuffle tear until the pattern looks natural.
3
Choose the paper color, the size, and whether to add a drop shadow.
4
Copy the CSS and HTML and paste them into your page.

Questions

How does the torn edge work in CSS?: The block is cut with clip-path: polygon(). Each torn edge gets a row of points at even spacing along its length and a random inward offset of up to the tear depth, so the straight edge becomes a jagged one. Untorn edges stay perfectly straight.
Why is the drop shadow on a separate wrapper?: clip-path also clips the element's own box-shadow, so a shadow on the torn element would be cut off. Putting filter: drop-shadow() on a parent follows the jagged outline instead, which is why the HTML has a .torn-paper-wrap around .torn-paper when the shadow is on.
What does the shuffle button and the number next to it do?: The tear is generated from a seed number, so the same seed always produces the same edge. Shuffle picks a new seed. The CSS you copy already contains the final coordinates, so the page you paste it into does not need any script and the edge never changes between loads.
Does the torn edge stay correct when the block is resized?: Points are placed in percentages along each edge and the tear depth is in pixels, so the jagged shape stretches with the width while the depth stays constant. If you make the block much wider than the preview, raise the detail setting so the teeth do not look too long and spiky.
Can I tear the corners differently or add a paper texture?: The corners follow the torn edges next to them. For a paper texture, put a background-image or a noise layer on the .torn-paper element in addition to the color; it is clipped along with the rest of the block.

Related tools

All Color & CSS Tools →

Updated November 7, 2026