8 CSS Snippets for Creating the Glassmorphism Effect


By

Glassmorphism effects have become a staple in modern web design. They offer a sleek aesthetic and fit beautifully with just about any background color.

The exact definition of glassmorphism can vary a bit. However, it’s essentially a “frosted” or semi-transparent element that mimics the look of glass and appears to hover over the rest of the page. Thus, the container’s background is allowed to shine through. You may even see some refraction in more realistic interpretations.

Want to see what all the fuss is about? We’ve put together a collection of glassmorphism effects built with CSS and other web technologies. They range from common UI elements like buttons to more abstract creations. Enjoy!


The Glass Slipper Breaks Free

This product card UI offers proof that glassmorphism’s beauty is in its simplicity. It takes a lovely gradient background and adds dimension. Hover your cursor over the sneaker, and it breaks out of its container and practically jumps right off the page.

See the Pen [WIP] Product Glassmorph by Alex

Frosted Form

The frosted-glass effect is put to good use here, as it allows this login form to stand out from the page’s photo background. That is one of the main benefits of using this design technique. You can use a complex background while keeping text readable. And it doesn’t disrupt the flow quite like a solid-colored container would.

See the Pen Frosted Glass Effect – Form by Usama Tahir

Picture Frame

This interactive picture frame presents a layered and colorful glass look. The multicolored shapes within the frame use various blend modes, creating a 3D effect. Hovering or touching the frame allows you to rotate the object, at which point some subtle reflection comes into play.

See the Pen CSS Glass Reflection Effect by Dovydas

It’s an Actual Glass

We might never find a more natural usage of glassmorphism. This CSS beer starts as an empty pint. Click and hold on to the glass to watch it fill up with frothy, bubbly goodness. The translucent coloring and refraction make it all the more realistic. Cheers!

See the Pen CSS BEER! by Mike Golus

Text Overlay

Here’s a neat way to add glass effects on top of text. Utilizing absolutely-positioned elements, these rounded shapes bring a unique touch to an otherwise-plain HTML heading. This could be implemented on page titles or even text-based logos.

See the Pen Glassmorphism by Albert

Hold My Buttons

Nominally, this snippet generates macOS wave patterns. But it also makes nice use of glassmorphism. The small container used to house a set of buttons is highly effective at making them the page’s focal point.

See the Pen Generative macOS Big Sur Waves 🌊 [SVG] by George Francis

Thick Glass Titles

Large featured images within page titles are a popular design technique. The trouble is that it can be hard to keep the text legible without ruining the whole aesthetic. This snippet shows us that a frosted-glass effect can do the job quite beautifully. Even with the busy photo background, the included text is easy to spot and read.

See the Pen CSS – Frosted Glass by Kyle Wetton

Glass Math

Calculators are often portrayed as utilitarian and devoid of compelling design. That doesn’t have to be the case. Check out this gorgeous glassmorphism-enhanced number cruncher. While the perspective-shifting hover effects may be a bit much in terms of usability, the look of the calculator itself is perfection.

See the Pen Glassmorph JS Calculator by Jack Ellis

Add a Touch of Glassmorphism to Your Projects

It’s easy to see why web designers are continuing to adopt glassmorphism. The effect is relatively uncomplicated. Yet, it adds elements of both beauty and utility.

As we saw above, even something as simple as a small container holding buttons can make an impact. You don’t have to go overboard with special effects to create a clean and effective look. It’s more about working with and enhancing the visual assets you have rather than inventing something new.

More CSS Effects Snippets


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.