CP

CSS Starburst Generator

Home/Tools/Starburst Generator

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

No sign-up neededRuns in your browserProduction-ready CSS

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%);
}

Related Tools

Box Shadow Generator

Design complex box shadows with multiple layers, blur, spread, and color options.

Text Shadow Generator

Create eye-catching text shadows with multiple layers and effects.

Border Radius Generator

Fine-tune border radius for each corner with visual preview.