Why use a mask instead of circles in the background color?

Painting circles in the page's background color only works on a solid background. A radial-gradient mask actually removes pixels from the element, so the notches stay transparent over photos, gradients, and dark mode alike.

Why are the mask layers 51% wide instead of 50%?

Each notch is drawn on its own half of the element. Making each half 51% leaves a small overlap so no one-pixel seam appears in the middle on fractional widths, while the notch circle still sits exactly on the edge.

Does the CSS work in Safari and older browsers?

The output sets both -webkit-mask and the standard mask shorthand, which covers current Chrome, Edge, Firefox, and Safari. Browsers that do not support masks simply show a plain rectangle.

Can I put text and content inside the ticket?

Yes. Put your content inside the .ticket element. The mask only clips the notches away, so text near a notch can be hidden — add padding at least as large as the notch radius around the edges that have notches.

How does the perforation line line up with the notches?

The dashed line is an extra background layer placed at the same percentage as the notches, so with side notches it runs horizontally between them and with top and bottom notches it runs vertically. It is not drawn for the corner style.

CSS TICKET & COUPON SHAPE GENERATOR

Cut ticket-style notches and a perforation line into any block and copy the CSS.

In short

Generate the CSS for a ticket or coupon shape with half-circle notches cut into the sides, the top and bottom, or the corners, plus an optional dashed perforation line. You get a ready-to-paste .ticket class built from radial-gradient masks that keeps the notches see-through on any background. It runs in your browser and nothing is uploaded.

Notch radius: 14px

Notch position: 70%

Width: 360px

Height: 140px

ColorDashed perforationLine color

.ticket {
  width: 360px;
  height: 140px;
  background: repeating-linear-gradient(to right, #201d19 0 6px, transparent 6px 12px) 0 calc(70% - 1px) / 100% 2px no-repeat,
    #ffb347;
  -webkit-mask: radial-gradient(circle 14px at 0 70%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 14px at 100% 70%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 14px at 0 70%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 14px at 100% 70%, #0000 98%, #000) right / 51% 100% no-repeat;
}

Example output (default settings)

CSS

.ticket {
  width: 360px;
  height: 140px;
  background: repeating-linear-gradient(to right, #201d19 0 6px, transparent 6px 12px) 0 calc(70% - 1px) / 100% 2px no-repeat,
    #ffb347;
  -webkit-mask: radial-gradient(circle 14px at 0 70%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 14px at 100% 70%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 14px at 0 70%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 14px at 100% 70%, #0000 98%, #000) right / 51% 100% no-repeat;
}

HTML

<div class="ticket">
  <!-- your ticket or coupon content here -->
</div>

How to make a ticket shape

1
Pick where the notches go: sides, top and bottom, or the corners.
2
Set the notch radius, its position along the edge, and the ticket size.
3
Choose the ticket color and turn the dashed perforation line on or off.
4
Copy the CSS and HTML and paste them into your page.

Questions

Why use a mask instead of circles in the background color?: Painting circles in the page's background color only works on a solid background. A radial-gradient mask actually removes pixels from the element, so the notches stay transparent over photos, gradients, and dark mode alike.
Why are the mask layers 51% wide instead of 50%?: Each notch is drawn on its own half of the element. Making each half 51% leaves a small overlap so no one-pixel seam appears in the middle on fractional widths, while the notch circle still sits exactly on the edge.
Does the CSS work in Safari and older browsers?: The output sets both -webkit-mask and the standard mask shorthand, which covers current Chrome, Edge, Firefox, and Safari. Browsers that do not support masks simply show a plain rectangle.
Can I put text and content inside the ticket?: Yes. Put your content inside the .ticket element. The mask only clips the notches away, so text near a notch can be hidden — add padding at least as large as the notch radius around the edges that have notches.
How does the perforation line line up with the notches?: The dashed line is an extra background layer placed at the same percentage as the notches, so with side notches it runs horizontally between them and with top and bottom notches it runs vertically. It is not drawn for the corner style.

Related tools

All Color & CSS Tools →

Updated October 13, 2026