FREE · DESIGN & CSS TOOLS
Liquid Glass CSS Generator.
Create Apple-style Liquid Glass panels in CSS with blur, saturation, tint, edge highlights and shadow, plus an optional SVG refraction effect, with a live preview.
Loading the calculator…
How to use Liquid Glass CSS Generator
Move the sliders or pick a preset; the preview updates live. Copy the CSS and HTML; switch on refraction for a lens effect in Chromium browsers.
How it works
backdrop-filter blurs and saturates what is behind the element; inset shadows draw the bright and dark edges; an optional SVG feDisplacementMap bends the background.
Example
The “iOS 26 style” preset gives a 28 px card with blur(14px) saturate(180%), a 12 % white tint and a bright top edge.
Questions about Liquid Glass CSS Generator
Is Liquid Glass CSS Generator free, and do I need an account?
Yes. This tool is free to use in your browser without an account. Processing takes place on your device.
What are the limits and what should I check?
Refraction works in Chromium only; other browsers keep the blur. Everything is calculated in your browser; nothing you type is uploaded. Review the result before using it in your work.
Is my input sent to a server?
Your input is processed in your browser and is not uploaded by this tool. Files and pasted text are cleared when the page is refreshed. Normal website requests are still required to load the page and its libraries. Read the privacy explanation.