Learn how to create a clean, scalable hamburger menu icon using pure CSS. Below you’ll find a live preview, two coding methods, and quick tips for customization and accessibility. The examples use relative units and CSS variables so the icon adapts to its container or font size.
Live Preview: Hamburger Menu Icon
Method 1: Using Pseudo-elements
/* Responsive, single-element icon with rounded ends and full-height container */
.hamburger {
/* Customize size via CSS variables and/or font-size */
--bar: 0.45rem; /* thickness of each bar */
--gap: 0.9rem; /* center-to-center offset between bars */
--width: 10rem; /* max inline size of the icon */
width: min(100%, var(--width));
height: calc(2 * var(--gap) + var(--bar)); /* full icon height */
position: relative;
/* Color inherits from current text color */
color: #cd5454;
/* All bars are drawn via a single rounded pseudo-element */
background: none;
/* Optional button-like defaults and centering */
display: block;
margin-left: auto;
margin-right: auto;
border: 0;
background-color: transparent;
/* Ensure minimum tap target */
min-width: 44px;
min-height: 44px;
}
/* Draw three rounded bars from one pseudo-element using box-shadow */
.hamburger::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: var(--bar);
background: currentColor;
border-radius: calc(var(--bar) / 2);
transform: translateY(-50%);
box-shadow:
0 calc(-1 * var(--gap)) 0 0 currentColor, /* top bar */
0 var(--gap) 0 0 currentColor; /* bottom bar */
}Method 2: Using Multiple Background Gradients
/* Responsive single-element variant without pseudo-elements */
.hamburger-gradient {
--bar: 0.45rem;
--gap: 0.9rem;
--width: 10rem;
width: min(100%, var(--width));
height: calc(2 * var(--gap) + var(--bar));
color: #cd5454; /* sets bar color via currentColor */
/* Three horizontal bars positioned around the vertical center */
background:
linear-gradient(currentColor, currentColor) center calc(50% - var(--gap)) / 100% var(--bar) no-repeat,
linear-gradient(currentColor, currentColor) center / 100% var(--bar) no-repeat,
linear-gradient(currentColor, currentColor) center calc(50% + var(--gap)) / 100% var(--bar) no-repeat;
/* Optional centering of the whole icon */
display: block;
margin-left: auto;
margin-right: auto;
/* Ensure minimum tap target */
min-width: 44px;
min-height: 44px;
}How This Works
In the pseudo-element method, a single rounded bar is drawn at the vertical center and duplicated above and below using box-shadow. Because the base bar uses a border-radius equal to half its thickness, all three bars have rounded ends and scale cleanly.
The gradient method stacks three linear-gradient layers and positions them around 50% of the container’s height. Because sizes are set with rem-based variables and percentages, the icon scales with its container or font size. This approach is simple and stays single-element without pseudo-elements (note that achieving rounded ends on the gradients requires more advanced techniques).
How to Center Content Inside a Hamburger Menu Icon
Now that the icon element has the full height of the visual shape, you can center content directly on it or on a wrapper (e.g., a button) that uses these styles.
Method 1: Use CSS Flexbox
.hamburger,
.hamburger-gradient {
display: flex;
justify-content: center;
align-items: center;
}Method 2: Use CSS Grid
.hamburger,
.hamburger-gradient {
display: grid;
place-items: center;
}When to Use Each Shape Method
Use the single pseudo-element + box-shadow method when you want rounded ends and minimal markup. It’s great for scalable, accessible icons where you change color/size or show/hide the icon.
Use the gradient method for a simple, single-element icon that scales easily and avoids pseudo-elements (rounded ends are trickier here).
If you need fully independent transforms (e.g., morph each bar separately into an “X”), you’ll need three distinct renderable boxes, such as three child elements, or another technique that creates three independently transformable layers. Neither the single pseudo-element + box-shadow method nor the three-gradient background alone provides per-bar transforms.
Quick Customizations
Change the color by updating the element’s color (the bars use currentColor). Adjust bar thickness and spacing by modifying the –bar and –gap variables. Control the maximum width with –width or by sizing the container (the icon respects min(100%, –width)). Because sizing uses rem and percentages, the icon responds to font-size or container width changes.
Accessibility & SEO
Place the icon inside a real button and include aria-label, aria-controls, and aria-expanded. For example: <button class="hamburger" type="button" aria-label="Open menu" aria-controls="site-menu" aria-expanded="false"></button>. Toggle aria-expanded to true/false when the menu opens/closes, and ensure the button’s tappable area meets minimum size guidelines (e.g., at least 44×44px), which the examples enforce with min-width/min-height. Also ensure sufficient color contrast for visibility.