Learn two modern, production-ready ways to draw a crisp, scalable starburst badge using pure CSS, no images or SVGs required.
Live Preview: Starburst
Method 1: Using clip-path (Polygon)
/* A scalable CSS starburst using clip-path */
.starburst {
width: 150px;
aspect-ratio: 1;
background: #cd5454;
/* Alternate inner/outer points around the circle for spiky edges */
clip-path: polygon(
50% 0%,
56% 14%,
68% 6%,
60% 24%,
80% 20%,
64% 36%,
100% 50%,
64% 64%,
80% 80%,
60% 76%,
68% 94%,
56% 86%,
50% 100%,
44% 86%,
32% 94%,
40% 76%,
20% 80%,
36% 64%,
0% 50%,
36% 36%,
20% 20%,
40% 24%,
32% 6%,
44% 14%
);
/* Center the block if needed */
display: block;
margin: 0 auto;
}
Method 2: Using CSS Masks (repeating-conic-gradient)
/* A mask-based starburst with adjustable spike count/width */
.starburst-mask {
width: 150px;
aspect-ratio: 1;
background: #cd5454;
/* Two masks:
1) radial-gradient creates a ring (transparent center, opaque ring, transparent outside)
2) repeating-conic-gradient carves evenly spaced spikes
Combined via intersect so only spiky ring remains */
-webkit-mask:
radial-gradient(circle, transparent 0 34%, #000 35% 50%, transparent 51%),
repeating-conic-gradient(#000 0deg 10deg, transparent 10deg 20deg);
mask:
radial-gradient(circle, transparent 0 34%, #000 35% 50%, transparent 51%),
repeating-conic-gradient(#000 0deg 10deg, transparent 10deg 20deg);
/* Compose layers: intersect (WebKit uses source-in) */
-webkit-mask-composite: source-in;
mask-composite: intersect;
display: block;
margin: 0 auto;
}
How This Works
The clip-path approach traces a polygon around the element, alternating “outer” and “inner” coordinates around the center to form jagged spikes. Because the coordinates are percentages, the starburst scales cleanly with the box size.
The mask approach paints the element’s background and then uses masks to reveal only spike-shaped wedges in a ring near the outer edge. A radial mask makes a ring by defining a transparent center, an opaque band, then transparent again outside that band; a repeating-conic-gradient defines evenly spaced wedges. Their intersection creates the burst tips.
How to Center Content Inside a Starburst
The easiest way is to turn the starburst into a flex or grid container and center items with built-in alignment.
Method 1: Use CSS Flexbox
.starburst {
display: flex;
justify-content: center;
align-items: center;
/* existing shape styles here */
}
/* Example: place a single character or icon inside */
.starburst > * {
color: #fff;
font: 600 16px/1.2 system-ui, sans-serif;
}
Method 2: Use CSS Grid
.starburst {
display: grid;
place-items: center;
/* existing shape styles here */
}
.starburst > * {
color: #fff;
font: 600 16px/1.2 system-ui, sans-serif;
}
When to Use Each Shape Method
Use clip-path when you want a precise, custom outline that is predictable across browsers and easy to export or tweak by moving points. Use the mask method when you want quick, parametric control over spike count and width (by changing the conic-gradient angles). Note that advanced mask composition may need vendor prefixes and newer browser support, and that -webkit-mask-composite uses different keywords than mask-composite.
Quick Customizations
Change color by updating the background value (e.g., background: #cd5454;). For a sharper or denser burst, add more polygon points (clip-path) or adjust the repeating-conic-gradient angles (masks). For an outline that follows the starburst shape, prefer filter: drop-shadow with a nonzero blur (e.g., filter: drop-shadow(0 0 1px #333)) or use multiple zero-blur offsets for a crisper stroke (e.g., filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)). Box-shadow follows the element’s box, not the clipped/masked silhouette, so it won’t create a true contour border; alternatively, use a pseudo-element with the same clip-path/mask, scaled up to simulate a stroke.
Accessibility & SEO
If the starburst conveys meaning (e.g., “Sale” badge), give the element a descriptive aria-label or include visible text inside so assistive technologies can interpret it.
Note: border-radius: 50% on the masked version would clip the entire element to a circle (and shave off the spikes). Only add it if you intentionally want circular clipping.