Create the translucent blurred header seen on modern sites. Tune the blur, tint and saturation, choose a full-width or floating bar, and get a working hamburger menu for phones.
Scroll inside the preview to see the colourful content blur behind the bar, and switch to Mobile to try the menu.
Runs entirely in your browser. Nothing is uploaded to any server.
Content softly shows through the bar as you scroll.
The sticky bar keeps navigation one tap away.
A real hamburger button with aria-expanded opens the menu.
backdrop-filter applies filters to whatever is behind an element. A blur softens the content under the bar, and a saturation boost above 100% keeps colours rich instead of washed out. The semi-transparent tint on top gives the bar enough contrast for the links.
Older browsers that do not support backdrop-filter get a nearly opaque background through an @supports rule, so the text stays readable. Safari still needs the -webkit- prefix, which is included.
Lower values look glassier, higher values read better on busy pages.
A rounded bar with a gap from the top and sides.
A soft shadow appears once the page has scrolled.
The blur only shows when there is content behind the bar. On a plain white page it looks like a normal header.
All current versions of Chrome, Edge, Safari and Firefox. Older browsers fall back to a solid background.
Large blur values on big areas can cost some performance on low-end phones. Values between 8 and 20 pixels are a good balance.
Choose a dark tint colour such as #111827 and a light text colour.
Sticky stops working when a parent element has overflow hidden. Keep the header as a direct child of body.
More free tools from My Panda Toolbox.