How I Added Apple’s “Liquid Glass” Effect to My Portfolio (React + CSS Tricks)

#webdev #react #css #design

When I first built my developer portfolio, it was functional and clean — but I wanted to give it a modern, premium feel. That’s when I experimented with Apple’s famous “liquid glass” UI effect — the frosted glass blur you see in macOS 26 and iOS 26.

Here’s how I integrated it across my portfolio built with React + Vite. 🚀

🔍 What is the “Liquid Glass” Effect?

It’s also known as glassmorphism:

Transparent layers
Blurred backgrounds
Subtle borders with highlights
A glowing depth effect

It gives websites an Apple-like, futuristic look while keeping things minimal.

🛠️ My Setup

Frontend → React + Vite
Styling → Plain CSS (but works with Tailwind too)
Deployment → Vercel

🎨 The CSS Recipe

.glass-card {
  background: rgba(255, 255, 255, 0.1); /* transparent layer */
  backdrop-filter: blur(10px);          /* the blur magic */
  -webkit-backdrop-filter: blur(10px);  /* for Safari */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 20px;
  color: #fff;
}

Then just wrap your portfolio sections in a div with class="glass-card".

✨ Before vs After

Before → plain flat sections
After → elegant, Apple-inspired panels with depth + blur

I used this effect in my navbar, project cards, and about section to keep the design consistent.

📈 What I Learned

Use subtle blur (5–15px) → too much looks messy.
Keep high contrast text (white/black) so it’s readable.
Add glow shadows to make cards float.
Works best on dark mode backgrounds.

🚀 Live Demo

You can see the liquid glass effect live on my portfolio:
👉 jerophin-portfolio.vercel.app

🔑 Key Takeaway

A simple CSS trick like backdrop-filter can transform the feel of an entire site. Adding small details like this can make your portfolio look premium and recruiter-ready — and it’s surprisingly easy to implement!

💬 Over to You

Have you tried glassmorphism in your projects? Drop your links or thoughts — I’d love to see them!

DEV Community