CSS Star Generator

Set the number of points and how far in they cut, and you have anything from a rating star to a sunburst. Copy the polygon and use it as it stands.

About the CSS star

A star is a polygon that alternates between two circles: every other point sits on an outer radius, the ones between them sit on a smaller inner one. That is the whole trick, and it is why one shape covers a rating star, a sheriff's badge, a sparkle and a sale sunburst - all you change is how many points there are and how far in the inner ones sit.

Getting those coordinates right by hand means ten sine and cosine calculations for a five-point star. That is what the generator is for: pick the numbers, read the polygon.

The code

.shape {
  clip-path: polygon(
      50% 0%, 63.23% 31.8%, 97.55% 34.55%, 71.4% 56.95%, 79.39% 90.45%,
      50% 72.5%, 20.61% 90.45%, 28.6% 56.95%, 2.45% 34.55%, 36.77% 31.8%
  );
  width: 240px;
  height: 240px;
  background: #0d6efd;
}

Ten points for a five-point star: outer, inner, outer, inner, all the way round. The first, 50% 0%, is the top point. The outer points are 72 degrees apart, the inner ones offset by 36 degrees and pulled in to 45% of the radius. Change that inner percentage and the character of the star changes completely - it is much more expressive than the number of points.

What the two settings do

Points, 3 to 16 - five is the familiar star, six reads as a snowflake or a Star of David, and anything past ten starts looking like a burst or a gear rather than a star.
Inner radius, 10% to 90% - the real control. Around 38% gives the crisp, classical five-point star; 45% is a little softer; below 25% you get thin spikes; above 70% the points barely dent the outline and the shape becomes a cog or a seal.

Two combinations are common enough to have their own presets: a Burst is sixteen points at 80% inner radius, and a Seal is twenty points at 88% - the scalloped edge round a certificate stamp.

Rating stars

Star ratings are the most common reason to want this shape, and the neatest implementation does not use ten of them. Lay out five identical clipped stars in a row in the "empty" color, put a copy of the same row on top in the filled color, and clip the top row's width to the rating - 3.5 stars is width: 70%. You get half stars for free, no images, and one number to change. Add role="img" and an aria-label with the actual rating, because none of this is readable to a screen reader on its own.

Frequently asked questions

Why does my five-point star look lopsided?

Almost always the box, not the polygon. A star drawn on a circle is symmetrical only in a square, so a wide box stretches it sideways. Set aspect-ratio: 1 / 1. A star is also visually bottom-heavy by nature - the two lower points sit wider apart than the upper ones - so a small optical nudge upward often looks more balanced than the mathematically centred version.

How do I make the star's points rounded?

Use the Rounded star preset, which replaces each sharp vertex with a short arc. It costs a much longer rule - every corner becomes several points - but it is the only way to soften a polygon, since clip-path: polygon() has no corner radius.

Can I animate a star filling up?

Yes - animate a wrapper's width rather than the shape. Put the star on an element with the empty color, overlay a copy in the filled color inside a container with overflow: hidden, and transition that container's width from 0 to 100%. The clip-path never changes, so it stays perfectly crisp.

Is a CSS star better than a star character or an icon font?

It scales cleanly and takes any color or gradient, which a text character does not always do reliably across platforms. But if you just need a small star icon in a sentence, the character or an SVG icon is less work. CSS earns its place when the star is a sized, colored, interactive element in its own right.

Menu