Glassmorphism: What It Is and How to Create the Glass Effect (2026)

Liquid glass design vs classic glassmorphism

Here is where people get confused. Liquid Glass is Apple's own system-level material. It reacts to the content behind it, picks up color from its surroundings and responds to movement with highlights.

Classic glassmorphism is the broader, simpler recipe: blur plus transparency plus a light edge. Think of Liquid Glass as the most polished, dynamic cousin. You do not need Apple's engine to get a similar mood in a static graphic. A glossy highlight, a bright edge and a bit of refraction-style color shift get you surprisingly close.

If you follow what is trending, glass sits right next to other big looks covered in our graphic design trends for 2026.

The anatomy of the glassmorphism effect

Every good glass element has the same five ingredients. Miss one and the effect falls flat.

1. Translucency: a fill with low opacity, often 10 to 40 percent white or tinted color, so the background shows through.
2. Background blur: the content behind the glass is blurred, which creates the frosted look and keeps text legible.
3. A thin, light border: a 1 pixel highlight on the edge catches light and separates the panel from the background.
4. A soft shadow: a gentle, diffuse shadow lifts the glass off the surface.
5. A vibrant background: bright gradients, shapes or photos give the glass something to blur. Over a flat white background, the effect is invisible.

That last one matters most. Glass needs color behind it. A mesh gradient is perfect, and you can generate one with our free mesh gradient generator if you want a quick starting point.

Glassmorphism vs neumorphism vs flat design

These three styles get compared constantly. Here is how they differ.

The short version: neumorphism is about pushing shapes out of a surface, flat design is about removing depth, and glassmorphism is about stacking transparent layers. Of the three, glass has the most visual punch for marketing content.

Glassmorphism examples you can borrow

Wondering where glass actually shines? These are the use cases that work best:

• Carousel slides: a glass card holding the headline over a gradient background makes text pop.
• Dashboard and app mockups: stat cards and overlays that float above a colorful backdrop.
• Banners and hero images: a frosted label placed over a photo, so text stays readable without a heavy dark overlay.
• YouTube thumbnails: glass badges and callouts that sit on top of the subject without hiding it.
• Pricing and feature cards: translucent panels that make a product page feel premium.
• Music, weather and fintech UI: all love the airy, layered feel.

Want to see how this fits into a bigger social look? Our guide on building a social media aesthetic that grows your brand shows how to keep a style consistent across posts.

When to use glassmorphism (and when not to)

Glass is a seasoning, not the whole meal. Use it when:

• You have a colorful or image-based background to blur.
• You want one clear focal element, like a headline card or a CTA.
• The text on the glass is short and large.

Skip it when:

• Your content is long, dense body text.
• The background is busy or very light with no color variation.
• The audience relies on high-contrast, accessible interfaces.
• You would stack glass on glass on glass. Restraint wins.

Accessibility: the glassmorphism contrast problem

This is the part most trend posts skip. Translucent surfaces make contrast unpredictable, because the background keeps changing behind your text.

The WCAG standard asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, as explained in the W3C guidance on minimum contrast. Here is how to stay safe:

• Put text on the calmest area of the background, not across a busy edge.
• Add a subtle tint to the glass (dark or color) so text has a stable base.
• Use bold, larger type on glass. Thin fonts disappear.
• Test the lightest and darkest spots behind the text, not just the average.
• For live interfaces, respect users who turn on reduced transparency in their system settings.

For a static social graphic you control the background, so it is easier. For a real app or website, accessibility is not optional.

How to create glassmorphism step by step (no code)

Here is the practical workflow for graphics, carousels and banners. You can follow it in any design tool, and it works especially well when an AI builds the first version for you.

Step 1: Start with a vibrant background

Pick a gradient, a mesh gradient or a colorful photo. Violet, orange, teal and pink all blur beautifully. If you need one fast, use the mesh gradient generator, or try the animated background generator if you want motion.

Step 2: Add a rounded rectangle

Draw a card with generous corner radius. Rounded corners make glass feel soft and natural. Keep padding inside the card generous too.

Step 3: Make the fill translucent

Lower the fill opacity to somewhere between 10 and 40 percent. White works for light looks, and a dark tint works for moody ones. Tinted fills (violet, blue, amber) give you a colored glass.

Step 4: Add background blur

Apply a background blur to the card so everything behind it softens. Start moderate and increase until the shapes behind turn into smooth color.

Step 5: Add a thin keyline border

A 1 pixel border in white at low opacity gives the glass an edge that catches the light. Make it brighter on the top and left for a realistic highlight.

Step 6: Add a soft shadow and a glow

Use a large, low-opacity shadow that follows the shape of the card. A faint glow in the background color makes the glass feel like it is lit from behind.

Step 7: Place your text and check contrast

Add a headline in a bold font. If you want a refresher on this, see our guide to adding text to AI images. Then check contrast against the 4.5:1 and 3:1 targets above.

How to make glassmorphism with Krumzi

With Krumzi, you do not have to build each layer by hand. You describe the design in plain text, for example "a carousel slide with a frosted glass card over a violet and orange mesh gradient", and the AI builds it from scratch. Krumzi supports glass fills in several styles (liquid, frosted, clear, tinted, dark and chromatic), background blur, gradient and mesh gradient backgrounds, shadows that follow the silhouette, glows, keyline borders, image masks and text effects. Everything stays fully editable afterward, so you can tweak the blur, tint or text yourself.

This is a great fit for formats where glass looks best, like a carousel post or a YouTube thumbnail.

Glassmorphism CSS snippet (for developers)

Building a website or app? Here is the classic CSS recipe using backdrop-filter:

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
}

A few notes. The element must be at least partly transparent for the blur to show. According to MDN's backdrop-filter documentation, the property has been supported across the latest browsers since September 2024, but older browsers may need a solid fallback. Also watch out for parent elements with filter, opacity or mask, which can stop the effect from working.

Blur is also heavy on lower-end devices, so avoid stacking many blurred layers on one screen.

Common glassmorphism mistakes

• No colorful background. Glass over white looks like nothing.
• Too much blur or too little. Aim for soft shapes, not mud, and not a see-through window.
• Low-contrast text. The number one problem. Add a tint or enlarge the type.
• Heavy borders. Keep keylines thin and subtle.
• Glass everywhere. Use one or two glass elements per design.
• Ignoring performance. On the web, too many backdrop filters can slow things down.
• Muddy shadows. Keep them soft and low opacity.

Frequently Asked Questions

What is glassmorphism in simple terms?

Glassmorphism is a design style where elements look like frosted glass. They are semi-transparent, blur what is behind them and have a thin light border. It works best over bright, colorful backgrounds.

Is glassmorphism still popular in 2026?

Yes, and Apple's Liquid Glass design for iOS 26 pushed translucent interfaces back into the spotlight. The pure, heavy blur look has settled into a more subtle, refined style. It remains a favorite for hero sections, cards and social graphics.

What is the difference between glassmorphism and neumorphism?

Glassmorphism uses transparency, blur and bright edges to make layers float above a background. Neumorphism uses soft shadows and highlights to make shapes look pressed into or pushed out of a surface of the same color. Glass offers more contrast and visual energy, while neumorphism often struggles with accessibility.

How do you create the glassmorphism effect without code?

Start with a colorful gradient background, add a rounded card, lower its fill opacity, apply background blur, then add a thin light border and a soft shadow. In an AI design tool like Krumzi you can simply describe the look and edit the result afterward.

Is glassmorphism bad for accessibility?

It can be if you ignore contrast. Text on a translucent surface may fail the WCAG 4.5:1 requirement when the background changes behind it. Add a tint, use large bold type and test the lightest and darkest areas behind your text.