Learn how to draw a classic Pac-Man shape using pure CSS. Below you’ll find a live preview, two different methods, and quick tips to customize and center content inside the shape.
Live Preview: Pac-Man
Method 1: Using a Conic Gradient
.pacman {
width: 140px;
height: 140px;
border-radius: 50%;
/* Mouth opens to the right (60° wedge) */
background: conic-gradient(transparent 0 30deg, #cd5454 30deg 330deg, transparent 330deg 360deg);
/* Optional centering in the page flow */
display: block;
margin-left: auto;
margin-right: auto;
}
/* Rotate to change direction (e.g., up = -90deg) */
/* .pacman { transform: rotate(-90deg); } */Method 2: Using Borders (Zero-Size Trick)
.pacman-border {
width: 0;
height: 0;
border-top: 70px solid #cd5454;
border-right: 70px solid transparent; /* mouth opening (right) */
border-bottom: 70px solid #cd5454;
border-left: 70px solid #cd5454;
border-radius: 50%;
/* Optional centering in the page flow */
display: block;
margin-left: auto;
margin-right: auto;
}
/* Rotate to change direction */
/* .pacman-border { transform: rotate(90deg); } */How This Works
The conic-gradient method paints a circular sweep of color and leaves a transparent wedge for the mouth. By capping the color between 30deg and 330deg and keeping the ends transparent, you get a clean, right-facing Pac-Man inside a circular border-radius.
The border method uses a 0×0 box with thick borders; three borders are colored and one is transparent. With border-radius: 50%, the result looks like a circle missing a triangular slice, which forms the mouth.
How to Center Content Inside a Pac-Man
The easiest way to center text or icons inside the Pac-Man is to add Flexbox or Grid to the shape element (works best with the gradient method, which has explicit width/height).
Method 1: Use CSS Flexbox
.pacman {
width: 140px;
height: 140px;
border-radius: 50%;
background: conic-gradient(transparent 0 30deg, #cd5454 30deg 330deg, transparent 330deg 360deg);
/* Center inner content */
display: flex;
justify-content: center;
align-items: center;
}Method 2: Use CSS Grid
.pacman {
width: 140px;
height: 140px;
border-radius: 50%;
background: conic-gradient(transparent 0 30deg, #cd5454 30deg 330deg, transparent 330deg 360deg);
/* Center inner content */
display: grid;
place-items: center;
}When to Use Each Shape Method
Use the conic-gradient method for precise control of mouth size, easy rotation, and when you need to place content inside (thanks to explicit width/height). Use the border method for a lightweight, widely compatible visual that doesn’t require inner content, but note it uses width:0; height:0; which makes content alignment and sizing less straightforward.
Quick Customizations
Change the color by replacing #cd5454; adjust the mouth size by tweaking the 30deg/330deg angles (larger gap = bigger mouth), or rotate with transform: rotate(…). To outline the Pac‑Man shape (including the mouth), use filter: drop-shadow(…) which follows transparency, or clip/mask the element to the Pac‑Man shape (e.g., with -webkit-mask/mask or clip-path) and then apply drop-shadow on the masked element. If you need a true stroke along the exact silhouette, consider using an SVG path.
Accessibility & SEO
If the Pac-Man is meaningful (not purely decorative), add a descriptive role and label on the container (e.g., role=”img” with an aria-label) so assistive technologies announce it properly.