Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips

Glass & Morphism

Glassmorphism, neumorphism, liquid glass and superellipse.

How do you create the trending frosted glass effect? These 42 glassmorphism effects use backdrop-filter to create elegant translucent surfaces: cards, modals, navigation bars and UI components. Each effect is compatible with all modern browsers and comes with its CSS code.

Glass Card

Hover for the effect

Glass Card

Classic glassmorphism card with backdrop-filter, semi-transparent background and subtle border. Colored orbs float behind.

CSS Backdrop Hover

Frosted Panel

Blobs move behind the frosted glass

Frosted Panel

Frosted panel with animated gradient blobs in the background, showing the blur effect in real time.

CSS Animation Blur

Glass Navigation

Hover the links above

Glass Navigation

Glassmorphic navigation bar with backdrop blur and hover effects on the links.

CSS Nav Hover

Glass Morphing Button

Glass button that transforms and expands on hover with a backdrop blur effect.

CSS Button Morph
Popular
29€/mo

Billed annually

  • Unlimited components
  • Priority support
  • Lifetime updates
  • Source files included

Glass Pricing Card

Glass pricing card with gradient border, price, feature list and call-to-action button.

CSS Pricing Gradient
✕
✎

Confirmation

Do you want to save the changes made to this project?

Frosted Modal

Modal window with frosted glass effect. The background contains colored elements visible through the blur.

CSS Modal Frosted
✓

Success

Your changes have been saved.

✕
ⓘ

Information

New update available.

✕
⚠

Warning

Your session is about to expire.

✕

Glass Notification

Glass toast notifications with icon, text and close button. Three variants: success, info and warning.

CSS Toast UI
blur: 8px
blur: 16px
blur: 28px

Layered Glass

Multiple glass panels stacked at different blur levels, creating a depth effect.

CSS Depth Layers

Glass Input

Form fields with glass effect, backdrop blur and purple glow on focus.

CSS Form Focus

Aurora Glass

Animated aurora borealis

Aurora Glass

Glass card with animated aurora borealis colors behind the frosted surface.

CSS Aurora Animation

Neu Button

Neumorphic buttons with dual shadow (light and dark). The pressed state uses inset shadows to simulate depth.

CSS Neumorphism Hover

User Profile

Card with inset avatar, text and neumorphic progress bar.

Neu Card

Raised card with inset avatar (inset shadow), colored progress bar and soft shadows on hover.

CSS Card Neumorphism
Wi-Fi
Dark mode

Neu Toggle

Neumorphic toggle switches with inset track and raised knob. Bounce animation on state change.

CSS Toggle Interactive

Neu Input

Inset input fields with inner shadow. Subtle purple glow on focus and integrated search icon.

CSS Form Focus
Volume 75%
Brightness 40%

Neu Slider

Sliders with inset track and raised thumb. The fill bar uses a purple gradient.

CSS Slider UI

Neu Clock

Neumorphic analog clock with inset dial, real-time animated hands and hour markers.

CSS JS Animation

Midnight Drive

Synthwave FM

Neu Music Player

Complete music player with rotating artwork, progress bar and raised control buttons.

CSS JS Player
0

Neu Calculator

Complete calculator with inset display, raised keys and equal key with purple gradient.

CSS JS Interactive

Claymorphism

Clay design with soft edges, colored shadows and tactile 3D look.

Claymorphism Card

Colorful neumorphism variant with clay effect: rounded edges, inner shadows and pastel background.

CSS Clay 3D

Dashboard

+12.5%
2.4k Visits
186 Sales
94% Satisf.

Neu Dashboard

Mini dashboard with raised statistics, inset badge and bar chart in a neumorphic frame.

CSS Dashboard UI
Liquid Glass
Refraction + Specular

Liquid Glass Card

Translucent card with refraction and specular highlights via SVG feTurbulence and feSpecularLighting.

SVG Filter Backdrop Glass
Brand
Home About Contact
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Scroll me

Frosted Glass Navbar

Navigation bar with multi-layer backdrop-filter blur that intensifies on scroll.

Backdrop-filter Scroll Frosted

Glass Morphing Button

Button that transitions between a solid state and a liquid glass state on hover with SVG displacement.

SVG Hover Morph
Effect.Labs - Premium CSS/JS effects library with liquid glass, frosted blur, refraction, caustics, iridescent panels, and more visual effects for modern web design.

Liquid Lens Magnifier

Hoverable glass lens that refracts and magnifies underlying content with edge distortion.

JS Mouse Lens
Click anywhere

Glass Ripple Touch

Click on the glass surface to create concentric ripples that propagate outward.

JS Click Ripple
Iridescent

Iridescent Glass Panel

Glass panel with rainbow chromatic reflections that react to the mouse angle.

CSS Mouse Iridescent
Layer 1
Layer 2
Layer 3
Layer 4

Glass Depth Stack

Glass panels stacked at different depths with parallax blur between layers.

CSS 3D Parallax
Click to toggle

Liquid Glass Toggle

Toggle switch with a liquid glass bubble knob that squishes and refracts light.

JS Animation Toggle

Rain on Glass

Animated water drops sliding on a frosted glass surface with refraction trails.

JS Animation Rain
Click to shatter
Click to shatter / reform

Glass Shatter & Reform

Click to shatter the glass panel into fragments, then magnetically reassemble it.

JS Click Shatter

Bubble Glass Grid

Grid of glass bubbles that merge and separate on hover with smooth transitions.

CSS Grid Hover
Caustics Light patterns through glass

Glass Caustics

Luminous caustic patterns projected under a glass layer, simulating light refraction.

Canvas Animation Caustics
⚙Settings
♥Health
★Photos

Squircle Cards

Apple-style cards with smooth superelliptic corners and matching shadows via SVG clip-path.

SVG Clip-path Hover
87% CPU Load
42°C Core Temp
3.2G Memory

Beveled Control Panel

Dashboard panels with beveled corners creating a sci-fi interface aesthetic.

SVG Clip-path Sci-Fi
Messages 5
Active ✓
Warning !
Errors 3

Notched Badge System

Notification badges with notched corners for a technical and modern look.

SVG Clip-path Badge
📈 Analytics +24% this week
💌 Revenue $12,480
👥 Users 8,742 active

Scooped Containers

Panels with concave scooped corners for organic and fluid layouts.

SVG Clip-path Organic
Squircle
Bevel
Notch
Scoop

Morphing Corner Shapes

Elements that transition between squircle, bevel, notch and scoop on hover with CSS clip-path transitions.

CSS Transition Clip-path
80%Storage
45%CPU
70%RAM

Superellipse Progress Ring

Circular progress indicator using a superelliptic SVG path that morphs between circle and square.

SVG Animation Progress

Organic Button Set

Button collection where each variant uses different superelliptic curvature values.

CSS Clip-path Buttons
System Status
ONLINE
Shield Power
98.7%

Sci-Fi Window Frames

HUD-style interface panels with combined notch+bevel corners and animated borders.

CSS Animation Sci-Fi
Alice
Bob
Clara
Dave

Squircle Image Masks

Avatars masked by animated superellipses that morph on hover with a colored ring.

SVG Clip-path Hover
1
2
3
4
5
6
7
8
9
10
11
12

Corner Shape Grid

Responsive grid where each element adopts a different corner shape based on its position (squircle, bevel, notch, scoop).

CSS Grid Clip-path Responsive

Frequently Asked Questions

What is glassmorphism in CSS? +

Glassmorphism is a design style that mimics frosted glass. It uses backdrop-filter: blur() to blur the background visible through a semi-transparent element. Combined with an rgba background and a subtle border, it creates an elegant depth effect.

How do you create a glassmorphism effect in CSS? +

Apply background: rgba(255,255,255,0.1), backdrop-filter: blur(10px), border: 1px solid rgba(255,255,255,0.2), and border-radius. The element must be above visible content for the blur to be noticeable.

Is glassmorphism compatible with all browsers? +

Yes since 2022. backdrop-filter is supported by Chrome, Firefox, Safari and Edge. For older browsers, provide a fallback with an opaque background. Check with @supports (backdrop-filter: blur(1px)).

Does glassmorphism impact performance? +

backdrop-filter uses the GPU and can slow down pages with many frosted elements. Limit the effect to 3-5 elements per page. Avoid applying it on elements that move (scroll) as each frame recalculates the blur.

How do you combine glassmorphism with dark mode? +

In dark mode, use darker backgrounds (rgba(0,0,0,0.3)), more subtle borders (rgba(255,255,255,0.08)), and slightly increase the blur (15-20px). Add a subtle gradient for more depth.

Similar Categories

🌄

Backgrounds

50 effects

 🃏

Cards & Layouts

33 effects

 🌊

Liquid & Morphing

30 effects