Learn two easy CSS techniques to draw a crisp 8-point star, complete with a live preview, copy‑paste code, and centering tips for adding text or icons inside.
Live Preview: 8-Point Star
Method 1: Using CSS clip-path
.star8-clip {
width: 140px;
aspect-ratio: 1;
background: #cd5454;
/* 8-point star via 16-point polygon (outer/inner alternating) */
clip-path: polygon(
50% 0%, 60.7% 24.1%,
85.4% 14.6%, 75.9% 39.3%,
100% 50%, 75.9% 60.7%,
85.4% 85.4%, 60.7% 75.9%,
50% 100%, 39.3% 75.9%,
14.6% 85.4%, 24.1% 60.7%,
0% 50%, 24.1% 39.3%,
14.6% 14.6%, 39.3% 24.1%
);
margin-left: auto;
margin-right: auto;
/* Note: box-shadow is clipped by clip-path. For an outer shadow, use: */
/* filter: drop-shadow(0 2px 8px rgba(0,0,0,.2)); */
/* or wrap this element and apply box-shadow to the wrapper. */
}Method 2: Overlapping Squares (with a ::before)
.star8-squares {
position: relative;
width: 140px;
aspect-ratio: 1;
background: #cd5454; /* square 1 */
margin-left: auto;
margin-right: auto;
}
.star8-squares::before {
content: "";
position: absolute;
inset: 0;
background: #cd5454; /* square 2 */
/* Rotating a square 45° increases its bounding box by ~√2.
Scale by 1/√2 (~0.7071) so the tips stay inside 140×140. */
transform: rotate(45deg) scale(0.7071);
}
/* If you prefer the fuller, larger-star look and can account for overflow,
remove the scale(...) so the tips extend beyond the box:
transform: rotate(45deg); */How This Works
The clip-path method cuts a single square into a star by tracing 16 coordinates around the center, alternating between outer tips and inner notches to form an 8‑point shape. It’s pixel‑clean, responsive (with percentages), and needs only one element. Use filter: drop-shadow for outer shadows; box-shadow is clipped by the path.
The overlapping-squares method stacks two equal squares, with the top one rotated 45 degrees. Their union creates eight spikes (N, NE, E, SE, S, SW, W, NW) for a bold, geometric star using a simple pseudo-element. Note that a rotated square’s visual footprint grows by ~√2; scale the rotated square to fit or allow the tips to overflow and plan your layout accordingly.
How to Center Content Inside a 8-Point Star
The easiest way is to turn the star into a flex or grid container and center its children.
Method 1: Use CSS Flexbox
.star8-clip,
.star8-squares {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
}Method 2: Use CSS Grid
.star8-clip,
.star8-squares {
display: grid;
place-items: center; /* centers both axes */
}When to Use Each Shape Method
Use clip-path when you want a precise, classic 8‑point star with clean notches, easy scaling, and fine control over the points. Remember: for outer shadows, use filter: drop-shadow or a wrapper with box-shadow.
Use overlapping squares for a quick, broadly supported, and minimal approach; it’s great for bold logos or badges. Be mindful that a 45° rotation increases the visual size, either scale the rotated square to fit or allow overflow and accommodate it in your layout.
Quick Customizations
Change the color by editing background: #cd5454; and resize with width (keep aspect-ratio: 1). For an outer glow or shadow on the clip-path star, use filter: drop-shadow(0 2px 8px rgba(0,0,0,.2)) or apply box-shadow to a wrapper; box-shadow on the clipped element itself will be cut off. Rotate the entire star with transform: rotate(15deg).
Accessibility & SEO
If the star conveys meaning, provide accessible text and an appropriate role, for example: role=”img” with aria-label on the container, or include visible text inside. If the star is purely decorative, add aria-hidden=”true”. Also ensure sufficient color contrast against the background.