Beautiful Code
Posts
🥃 Liquid Glass – Beautiful Code #40

🥃 Liquid Glass – Beautiful Code #40

This week, Apple unveiled one of its most significant visual updates since iOS 7: Liquid Glass, a new design language that spans across its entire ecosystem.

Marc Taulé
June 12th, 2025

Hey! It’s Marc 👋

How are you?

If you're new here, let me quickly explain what Beautiful Code is all about. 👇

What can I expect from Beautiful Code?
Every week, you'll receive:
😍 3 awesome websites for inspiration
🔨 3 tools and resources that can help grow your products
🤖 3 code snippets ready to be used in your projects
😂 1 meme to add a bit of humor to our world

This week, Apple unveiled one of its most significant visual updates since iOS 7: Liquid Glass, a new design language that spans across its entire ecosystem. But it’s more than just a fresh look — Apple has crafted a fluid, translucent visual system that mimics the real-world properties of glass — like refraction, depth, and reflections — all while adapting to light, context, and user interaction.

The result is a UI that feels alive, with buttons gliding smoothly over glassy layers, backgrounds subtly shifting with movement, and a renewed sense of depth throughout iOS, macOS, and watchOS.

Feeling inspired, I’ve included some code snippets this week that recreate similar Liquid Glass effects — ready for you to plug into your own projects. It’s a fun and simple way to bring this visual language into CSS and JS.

If you try out any of the effects, I’d love to see what you come up with! 🚀

That’s all for now. Have a great week! 😊

Before we continue I want to remind you that you can support Beautiful Code buying me a coffee ☕️ I love good coffee! 😍

😍 Websites

🔨 Tools & Resources

1. Glow UI Icons

Glow Icons is a free, open-source collection of 442 crisp SVG icons designed specifically for user interfaces. Available in both outlined and solid styles, they’re consistently sized, MIT‑licensed, and easy to search, customize, download, or preview in Figma. Perfect for enhancing web and app UIs with clean, developer-friendly visuals.

👉 Check it out

2. SF Symbols 7

SF Symbols is Apple’s official library of over 6,900 vector-based icons designed to integrate seamlessly with the San Francisco system font. Optimized for use across iOS, macOS, watchOS, and tvOS, each symbol supports multiple weights, sizes, colors, and even animations. Developers can customize and export them using the SF Symbols macOS app, making it easy to maintain a consistent visual language in SwiftUI and UIKit apps.

👉 Check it out

3. Tailwind Animations

TailwindCSS Animations is a community-powered plugin for Tailwind CSS that adds over 60 ready-to-use animation utilities—such as fade-in, zoom, shake, swing, pulse, and more. It integrates easily via npm (@midudev/tailwind-animations) and lets you apply animated effects by simply adding classes like animate-fade-in or animate-bounce to your elements.

👉 Check it out