How does the hamburger icon turn into an X with just CSS?

The icon is one middle bar plus two pseudo-elements (::before and ::after) positioned above and below it. Toggling an `.open` class moves the pseudo-elements to the center and rotates them 45deg and -45deg, which is what forms the X — no extra markup or JavaScript animation needed, just a class toggle.

What's the difference between the Spin, Squeeze, Arrow, and Collapse styles?

Spin rotates both bars into a symmetric X. Squeeze rotates the whole icon 45deg while hiding the bottom bar, giving an asymmetric twist. Arrow hides the middle bar and rotates the top and bottom bars around their right edge so they meet at a point, forming a chevron/arrowhead. Collapse shrinks the top and bottom bars toward the center without rotation, for a simpler close indicator.

Do I need JavaScript to make this work?

Only enough to toggle a class — e.g. `element.classList.toggle('open')` on click. All the animation itself (the rotation, movement, and fade) is done with CSS transitions, so no animation library is required.

Is this hamburger button accessible?

Use a real element (not a ) so it's keyboard-focusable and clickable with Enter/Space, and set aria-label="Toggle menu" and aria-expanded on it, updating aria-expanded when the menu opens and closes. The button includes padding around the icon so the whole tappable area — not just the thin bars — registers clicks and taps.

Does this tool send my design anywhere?

No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.

CSS HAMBURGER MENU GENERATOR

Build an animated hamburger-to-X icon, then copy the CSS and matching HTML.

In short

Design an animated hamburger menu icon — spin, squeeze, arrow, or collapse — with adjustable size, thickness, color, and speed on a live preview, then copy the CSS and HTML. Runs entirely in your browser.

Bar width: 32px

Bar thickness: 3px

Gap: 7px

Corner radius: 2px

Transition: 0.30s

Color

.hamburger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 10px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 3px;
  background: #f2e9dc;
  border-radius: 2px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 32px;
  height: 3px;
  background: #f2e9dc;
  border-radius: 2px;
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
}

.hamburger::before {
  top: -10px;
}

.hamburger::after {
  top: 10px;
}

.hamburger-btn.open .hamburger {
  background: transparent;
}

.hamburger-btn.open .hamburger::before {
  top: 0;
  transform: rotate(45deg);
}

.hamburger-btn.open .hamburger::after {
  top: 0;
  transform: rotate(-45deg);
}

How to build a CSS hamburger menu icon

1
Click the icon in the preview to toggle it open and closed.
2
Pick an animation style: Spin, Squeeze, Arrow, or Collapse.
3
Adjust bar width, thickness, gap, corner radius, and transition speed.
4
Pick a color, then copy the generated CSS and the matching HTML button markup.

Questions

How does the hamburger icon turn into an X with just CSS?: The icon is one middle bar plus two pseudo-elements (::before and ::after) positioned above and below it. Toggling an `.open` class moves the pseudo-elements to the center and rotates them 45deg and -45deg, which is what forms the X — no extra markup or JavaScript animation needed, just a class toggle.
What's the difference between the Spin, Squeeze, Arrow, and Collapse styles?: Spin rotates both bars into a symmetric X. Squeeze rotates the whole icon 45deg while hiding the bottom bar, giving an asymmetric twist. Arrow hides the middle bar and rotates the top and bottom bars around their right edge so they meet at a point, forming a chevron/arrowhead. Collapse shrinks the top and bottom bars toward the center without rotation, for a simpler close indicator.
Do I need JavaScript to make this work?: Only enough to toggle a class — e.g. `element.classList.toggle('open')` on click. All the animation itself (the rotation, movement, and fade) is done with CSS transitions, so no animation library is required.
Is this hamburger button accessible?: Use a real <button> element (not a <div>) so it's keyboard-focusable and clickable with Enter/Space, and set aria-label="Toggle menu" and aria-expanded on it, updating aria-expanded when the menu opens and closes. The button includes padding around the icon so the whole tappable area — not just the thin bars — registers clicks and taps.
Does this tool send my design anywhere?: No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.

Related tools

All Color & CSS Tools →

Updated August 28, 2026