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 ✨ Go Premium

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

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

Glass Pricing Card

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

CSS Pricing Gradient

Frosted Modal

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

CSS Modal Frosted

Glass Notification

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

CSS Toast UI

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

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

Neu Card

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

CSS Card Neumorphism

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

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

Neu Music Player

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

CSS JS Player

Neu Calculator

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

CSS JS Interactive

Claymorphism Card

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

CSS Clay 3D

Neu Dashboard

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

CSS Dashboard UI

Liquid Glass Card

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

SVG Filter Backdrop Glass

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

Liquid Lens Magnifier

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

JS Mouse Lens

Glass Ripple Touch

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

JS Click Ripple

Iridescent Glass Panel

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

CSS Mouse Iridescent

Glass Depth Stack

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

CSS 3D Parallax

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

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

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

Notched Badge System

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

SVG Clip-path Badge

Scooped Containers

Panels with concave scooped corners for organic and fluid layouts.

SVG Clip-path Organic

Morphing Corner Shapes

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

CSS Transition Clip-path

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

Sci-Fi Window Frames

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

CSS Animation Sci-Fi

Squircle Image Masks

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

SVG Clip-path Hover

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

Liquid Glass

Light refracts through the surface. Move your mouse.

Liquid Glass Refraction

Liquid glass in the style of iOS 26: real refraction via SVG displacement, OKLCH tints and a specular highlight that follows your cursor. Readability and accessibility fallbacks built in.

💡 Perfect for: media widget, navigation bar, login modal, notification card over a rich visual.

SVG Filter backdrop-filter OKLCH Premium

Glass Depth Stack

Three glass layers at distinct depths that react in parallax on hover, delivering true spatial depth. Increasing blur and tint per layer, accessibility fallbacks included.

💡 Perfect for: notification stack, foreground pricing cards, multi-step onboarding, product hero with depth.

CSS 3D Parallax backdrop-filter Premium

Frosted Aurora

Animated northern lights on canvas, diffused through frosted glass. Premium atmospheric background with soft perpetual motion.

💡 Perfect for: login screen, landing hero, welcome panel, premium modal background.

Canvas backdrop-filter Aurora Premium

Glass Caustics (WebGL)

Real-time light caustics (fragment shader) rendered beneath a glass panel. The "pool / thick glass" effect that CSS alone cannot achieve.

💡 Perfect for: premium product hero, "Pro" subscription card, high-end SaaS header, launch page.

WebGL Shader Caustics Premium

Glass Shatter Reveal

The glass shatters into 3D shards on click, revealing hidden content, then reforms. Touch/keyboard interaction, spectacular and reversible.

💡 Perfect for: revealing a promo code, unlocking premium content, landing page easter egg, "scratch to win".

CSS 3D clip-path Interactive Premium

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