Skip to main content
iotools.cloudiotools.cloud

CSS Starburst / Sale-Badge Generator

Generate a many-spike starburst/sunburst clip-path shape — the classic 'sale seal' sticker look — from a spike count, inner/outer radius ratio and rotation, with a centered text label and a live preview.

Input

How many points around the badge — a gentle sunburst at 6, a dense starburst at 32.

Inner radius as a percent of the outer radius — lower is longer, sharper spikes; higher is short and blunt.

Spins the whole badge — useful for lining up a spike tip exactly where you want it.

Shown centered on top of the badge in both the preview and the HTML snippet.

Output

Your starburst badge will appear here.

CSS

Add this to your stylesheet, then apply class="starburst-badge" (with a nested "starburst-badge__label" span) to your markup.

HTML (self-contained)

Inline-styled markup matching the preview above — paste it anywhere, no stylesheet needed.

Was this helpful?

Guides

What is a starburst badge?

A starburst (or sunburst) badge is the spiky sticker shape used on "50% OFF!", "NEW!" and "SALE!" price tags — a many-pointed star radiating from a center, usually with a short line of text sitting in the middle. It's built entirely in CSS with a clip-path: polygon(...) value: a list of x% y% vertex coordinates that alternate between a long outer point and a short inner notch all the way around a circle.

This tool computes that vertex list for you from three simple controls — spike count, spike sharpness and rotation — instead of a fixed shape you'd have to hand-edit. Pick 8 spikes for a chunky retro seal or 24 for a fine sunburst rays effect, then drop a label on top and copy the ready-made CSS.

How to use this tool

  1. Set Number of Spikes — how many points radiate around the badge, from a gentle 6-point sunburst up to a dense 32-point starburst.
  2. Set Spike Sharpness (Inner Radius %) — this is the inner notch radius as a percent of the outer radius. Lower values (closer to 10%) pull the notches in tight for long, sharp spikes; higher values (closer to 90%) keep them short and blunt.
  3. Adjust Rotation if you want a specific spike tip pointing somewhere other than straight up (12 o'clock).
  4. Pick a Badge Size, Badge Fill Color, and your Label Text with its own font size and color.
  5. Copy the CSS (a .starburst-badge class plus a .starburst-badge__label span) into your stylesheet, or grab the HTML snippet below it — a self-contained, inline-styled version you can paste anywhere without touching a stylesheet at all.

How the shape is built

The polygon has 2 × spike count vertices. Even-indexed vertices sit on the outer radius (the spike tips, at the very edge of the badge's box); odd-indexed vertices sit on the inner radius (the notches between spikes). Walking evenly around the circle and alternating between the two radii is what produces the classic star/sunburst silhouette — the same construction a 5-point star uses, generalized to any spike count.

FAQ

Why doesn't the text touch the spike tips? The label is centered with flexbox inside the badge's full (pre-clip) box, and capped at 60% max-width so it stays clear of the notches between spikes at any spike count — a clip-path clips what's visible but doesn't change the layout box underneath it, so centering still works exactly like it would on an unclipped rectangle.

Can I use this for something other than a sale badge? Yes — a starburst clip-path is just a shape. Drop a background image behind it instead of a flat color, or skip the label entirely and use it as a decorative accent, a "featured" ribbon replacement, or a comic-style "BOOM!" callout shape.

What if I need a specific fixed shape instead of a procedural starburst — a triangle, hexagon, or the classic 10-point star preset? Use the CSS Clip-Path Generator, which covers circles, ellipses, insets and a library of common polygon presets (including a fixed star), plus a hand-editable custom point list.

Privacy

Everything happens in your browser. Your spike count, colors, and label text are never sent to a server — the CSS and preview update locally as you adjust the controls.

starburst shape csssale badge generatorsunburst css shapeprice tag sticker csssale seal generatordiscount badge cssspiky star shapepromo sticker css

Use it from code

From 3 credits per call

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-starburst-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "spikeCount": "12",
    "innerRadiusRatio": "45",
    "rotation": "0",
    "badgeSize": "220",
    "badgeColor": "#ef4444",
    "labelText": "50% OFF",
    "labelFontSize": "28",
    "labelTextColor": "#ffffff"
  }'

Swap in your own key from your account. The tool's fields are the body — no wrapper.

Ask an AI agent

Use the IOTools `css-starburst-generator` tool (CSS Starburst / Sale-Badge Generator) on this input:

YOUR_INPUT_HERE

Paste this at any agent connected to the IOTools MCP server, then add your input.

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads