Home / Soft and Tactile UI / Liquid Glass
Liquid Glass CSS Template, Free with Live Demo
Free liquid glass UI template in pure CSS, inspired by the Apple 2025 design style. Glossy panels, light edges and pill buttons. Live demo and HTML download. The example is Tidewell, a weather app screen.
What is liquid glass?
Liquid glass is the look Apple introduced across its devices in 2025. Panels feel thicker and wetter than normal frosted glass. Their edges catch the light, they bend the colors behind them a little, and buttons sit in soft pill shapes.
You can get very close to it with CSS. The trick is layering: a blur and saturation boost behind the panel, bright inset shadows along the top and left edges, and a faint highlight on top that makes the surface look curved.
Good for
- Weather, music and camera apps
- Floating toolbars and tab bars
- Product pages for phone and watch apps
- Any design that should feel current and polished
What you get in this template
- Glossy panels with light catching edges
- Floating pill tab bar with a working selected state
- Large thin temperature number as the hero
- Warm evening sky made only with gradients
- Hourly forecast that scrolls sideways on small screens
The key CSS
This is the part that makes the liquid glass look work. Copy it into your own project.
.liquid-glass {
border-radius: 32px;
background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.06));
backdrop-filter: blur(14px) saturate(180%) brightness(1.1);
box-shadow:
inset 1px 1px 0 rgba(255,255,255,.75),
inset -1px -1px 0 rgba(255,255,255,.2),
inset 0 0 20px rgba(255,255,255,.15),
0 18px 40px rgba(20,40,90,.25);
}How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
What is the difference between liquid glass and glassmorphism?
Glassmorphism is flat frosted glass with a border. Liquid glass adds depth: shiny edges, a stronger color boost behind the panel and highlights that make it look curved, like a drop of water.
Can I make Apple liquid glass with only CSS?
You can get a very close look with backdrop-filter, layered inset shadows and a highlight pseudo element. The true lens bending Apple uses needs SVG filters, which only work well in Chrome, so this template keeps to pure CSS that works everywhere.
Will this slow down my website?
Blur effects cost some performance on older phones. Use them on a few panels, not dozens, and you will be fine.
More Soft and Tactile UI designs
001. Glassmorphism
Harbor, a savings app landing page
003. Neumorphism
Hearth, a smart home control panel
004. Claymorphism
Pebble Math, a kids learning app
005. Frosted Aurora
Stillwater, a sleep and calm app
006. Soft UI
Loom, a weekly planner dashboard
007. Skeuomorphism
Field Journal, a notes app
008. Tactile Buttons
Clack, a keyboard shop with a working calculator
009. Jelly UI
Wobble, a gelato shop