CSS Pixels
Explore Tools
Home/Tools/Effects/Starburst Generator
Effects · Generator

Starburst Generator

Generate CSS starburst shapes with configurable points, inner/outer radius, and spin animation.

Shape

8
50%
25%
0°

Style

200px

Preview — 8-Point Starburst

polygon(50.00% 0.00%, 59.57% 26.90%, 85.36% 14.64%, 73.10% 40.43%, 100.00% 50.00%, 73.10% 59.57%, 85.36% 85.36%, 59.57% 73.10%, 50.00% 100.00%, 40.43% 73.10%, 14.64% 85.36%, 26.90% 59.57%, 0.00% 50.00%, 26.90% 40.43%, 14.64% 14.64%, 40.43% 26.90%)

Generated CSS
.starburst {
  width: 200px;
  height: 200px;
  background: #f59e0b;
  clip-path: polygon(50.00% 0.00%, 59.57% 26.90%, 85.36% 14.64%, 73.10% 40.43%, 100.00% 50.00%, 73.10% 59.57%, 85.36% 85.36%, 59.57% 73.10%, 50.00% 100.00%, 40.43% 73.10%, 14.64% 85.36%, 26.90% 59.57%, 0.00% 50.00%, 26.90% 40.43%, 14.64% 14.64%, 40.43% 26.90%);
}
100%
Free, no
sign-up needed
0
Code written
by hand
85+
CSS tools
in one place
<1s
Copy-ready
CSS instantly
What is this

What is the CSS Starburst Generator?

Generate CSS starburst and sunburst shapes using clip-path polygons. Set point count, depth, rotation, and colour, then copy the CSS.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Starburst Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

1

Set point count and depth

Choose the number of points (4-16) and the inner radius percentage. Higher inner radius = shallower points. Lower = sharper star points.

2

Set rotation and colour

Rotate the starburst to point straight up or at any angle. Pick the fill colour.

3

Copy the CSS

Click Copy to get the clip-path polygon with all calculated coordinates.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css
/* 8-point starburst using clip-path */
.starburst {
  width: 120px; height: 120px;
  background: #f97316;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}

Stars and bursts can also be created with CSS transforms (overlapping rotated squares) or SVG for more control over precise point shapes.

Pro tips

Pro tips for better results

★

4-6 points look like decorative badges, 8-16 look like sunbursts

4-point stars are bold callout shapes. 8-12 points create sunburst backgrounds. 16+ points start to resemble circles.

★

Combine with animation for a spinning sunburst

animation: spin 20s linear infinite gives a slow-rotating background effect. Use will-change: transform to keep it on the GPU.

FAQ

Frequently asked questions

No. Everything runs in your browser. Nothing is sent to a server.

Related tools

View all tools →
BOXBox Shadow GeneratorEffectsTEXText Shadow GeneratorEffectsBORBorder Radius GeneratorEffectsGLAGlassmorphism GeneratorEffects

From the blog

Read more →
Guides

Modern CSS techniques every developer should know

A practical tour of the CSS features that replaced yesterday’s hacks.

7 min read·Guides
Workflow

From design to code without the friction

How visual generators speed up the build without sacrificing clean output.

5 min read·Workflow
Fundamentals

Writing CSS that scales with your project

Tokens, naming, and structure that keep large stylesheets maintainable.

6 min read·Fundamentals