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.

Updated

What is glassmorphism, and how is it made in CSS?

Glassmorphism is a style of translucent, frosted-glass surfaces layered over a colourful background. In CSS it combines a semi-transparent background, backdrop-filter: blur() to soften what lies behind, a thin light border and a soft shadow. Neumorphism and superellipse (squircle) shapes, also on this page, are close relatives.

How to choose, performance and accessibility
  • It works best for cards, navigation bars, modals and pricing tables placed over images or gradients, as in Glass Card, Frosted Panel or Glass Navigation, and poorly over plain white.
  • Check text contrast against the brightest area behind the glass, limit the number of blurred layers on mobile, and provide a solid fallback where backdrop-filter is unavailable.
  • Glass Card, Frosted Panel, Neu Button, Squircle Cards, Beveled Control Panel and Liquid Glass are free with their code; the rest come with Premium.

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
View source code
HTML
<div class="demo-preview">
  <div class="glass-card-scene">
    <div class="glass-card-orb glass-card-orb--1"></div>
    <div class="glass-card-orb glass-card-orb--2"></div>
    <div class="glass-card-orb glass-card-orb--3"></div>
    <div class="glass-card-element">
      <h3>Glass Card</h3>
      <p>Hover for the effect</p>
    </div>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(224, 229, 236);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.glass-card-scene {
  width: 320px;
  height: 220px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass-card-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  animation: glassOrbFloat 6s ease-in-out infinite;
}

.glass-card-orb--1 {
  width: 120px;
  height: 120px;
  background: #8b5cf6;
  top: 10px;
  left: 20px;
  animation-delay: 0s;
}

.glass-card-orb--2 {
  width: 100px;
  height: 100px;
  background: #06b6d4;
  bottom: 10px;
  right: 20px;
  animation-delay: -2s;
}

.glass-card-orb--3 {
  width: 80px;
  height: 80px;
  background: #ec4899;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -4s;
}

.glass-card-element {
  position: relative;
  z-index: 1;
  width: 260px;
  height: 160px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card-element:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.3);
}

.glass-card-element::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
  border-radius: inherit;
  pointer-events: none;
}

.glass-card-element h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.glass-card-element p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

@keyframes glassOrbFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(15px, -10px) scale(1.1);
  }

  66% {
    transform: translate(-10px, 15px) scale(0.9);
  }
}
JavaScript
/* Pure CSS — no JavaScript required */

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
View source code
HTML
<div class="demo-preview">
  <div class="frosted-panel-scene">
    <div class="frosted-blob frosted-blob--1"></div>
    <div class="frosted-blob frosted-blob--2"></div>
    <div class="frosted-blob frosted-blob--3"></div>
    <div class="frosted-panel-element">
      <h3>Frosted Panel</h3>
      <p>Blobs move behind the frosted glass</p>
      <div class="frosted-dots">
        <span class="frosted-dot"></span>
        <span class="frosted-dot"></span>
        <span class="frosted-dot"></span>
      </div>
    </div>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(224, 229, 236);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.frosted-panel-scene {
  width: 340px;
  height: 230px;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #080812;
}

.frosted-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
}

.frosted-blob--1 {
  width: 160px;
  height: 160px;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  top: -30px;
  left: -20px;
  animation: blobDrift1 8s ease-in-out infinite;
}

.frosted-blob--2 {
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  bottom: -40px;
  right: -20px;
  animation: blobDrift2 10s ease-in-out infinite;
}

.frosted-blob--3 {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  top: 50%;
  left: 60%;
  animation: blobDrift3 7s ease-in-out infinite;
}

.frosted-panel-element {
  position: absolute;
  inset: 30px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 1;
}

.frosted-panel-element h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.frosted-panel-element p {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  text-align: center;
  padding: 0 20px;
}

.frosted-panel-element .frosted-dots {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.frosted-panel-element .frosted-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.frosted-panel-element .frosted-dot:nth-child(1) {
  background: #a855f7;
}

.frosted-panel-element .frosted-dot:nth-child(2) {
  background: #06b6d4;
}

.frosted-panel-element .frosted-dot:nth-child(3) {
  background: #ec4899;
}

@keyframes blobDrift1 {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(40px, 20px) rotate(90deg);
  }

  50% {
    transform: translate(20px, 60px) rotate(180deg);
  }

  75% {
    transform: translate(-10px, 30px) rotate(270deg);
  }
}

@keyframes blobDrift2 {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(-30px, -20px) rotate(-90deg);
  }

  50% {
    transform: translate(-50px, -40px) rotate(-180deg);
  }

  75% {
    transform: translate(-20px, -10px) rotate(-270deg);
  }
}

@keyframes blobDrift3 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-40px, -30px) scale(1.3);
  }
}
JavaScript
/* Pure CSS — no JavaScript required */

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
View source code
HTML
<div class="demo-preview">
  <div class="neu-btn-scene">
    <button class="neu-btn">
      <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      Continue
    </button>
    <button class="neu-btn neu-btn--pressed">
      <svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
      Done
    </button>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(224, 229, 236);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.neu-btn-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.neu-btn {
  width: 180px;
  height: 54px;
  border-radius: 16px;
  background: #e0e5ec;
  box-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.neu-btn:hover {
  box-shadow: 6px 6px 12px #b8bec7, -6px -6px 12px #ffffff;
  color: #8b5cf6;
}

.neu-btn:active,
.neu-btn--pressed {
  box-shadow: inset 4px 4px 8px #b8bec7, inset -4px -4px 8px #ffffff;
  color: #8b5cf6;
}

.neu-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
JavaScript
/* Pure CSS — no JavaScript required */

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
View source code
HTML
<div class="demo-preview">
  <style>
    .squircle-cards-wrap {
      display: flex;
      gap: 14px;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      padding: 10px;
    }
    .squircle-card {
      width: 110px;
      height: 110px;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      clip-path: url(#squircle);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 600;
      font-size: 0.75rem;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
      cursor: pointer;
      position: relative;
    }
    .squircle-card:nth-child(2) {
      background: linear-gradient(135deg, #ec4899, #f43f5e);
    }
    .squircle-card:nth-child(3) {
      background: linear-gradient(135deg, #06b6d4, #3b82f6);
    }
    .squircle-card .sq-icon {
      font-size: 1.8rem;
      margin-bottom: 4px;
    }
    .squircle-card:hover {
      transform: scale(1.08) translateY(-4px);
      filter: brightness(1.15);
    }
    .squircle-card-shadow {
      width: 110px;
      height: 110px;
      position: relative;
    }
    .squircle-card-shadow::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 8px;
      right: 8px;
      height: 20px;
      background: inherit;
      clip-path: url(#squircle);
      filter: blur(12px);
      opacity: 0.4;
      z-index: -1;
    }
  </style>
  <div class="squircle-cards-wrap">
    <div class="squircle-card-shadow" style="background: linear-gradient(135deg, #6366f1, #8b5cf6);">
      <div class="squircle-card"><span class="sq-icon">&#9881;</span>Settings</div>
    </div>
    <div class="squircle-card-shadow" style="background: linear-gradient(135deg, #ec4899, #f43f5e);">
      <div class="squircle-card" style="background: linear-gradient(135deg, #ec4899, #f43f5e);"><span class="sq-icon">&#9829;</span>Health</div>
    </div>
    <div class="squircle-card-shadow" style="background: linear-gradient(135deg, #06b6d4, #3b82f6);">
      <div class="squircle-card" style="background: linear-gradient(135deg, #06b6d4, #3b82f6);"><span class="sq-icon">&#9733;</span>Photos</div>
    </div>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(224, 229, 236);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.squircle-cards-wrap {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
}

.squircle-card {
  width: 110px;
  height: 110px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  clip-path: url(#squircle);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.75rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
  cursor: pointer;
  position: relative;
}

.squircle-card:nth-child(2) {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
}

.squircle-card:nth-child(3) {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
}

.squircle-card .sq-icon {
  font-size: 1.8rem;
  margin-bottom: 4px;
}

.squircle-card:hover {
  transform: scale(1.08) translateY(-4px);
  filter: brightness(1.15);
}

.squircle-card-shadow {
  width: 110px;
  height: 110px;
  position: relative;
}

.squircle-card-shadow::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 8px;
  right: 8px;
  height: 20px;
  background: inherit;
  clip-path: url(#squircle);
  filter: blur(12px);
  opacity: 0.4;
  z-index: -1;
}
JavaScript
/* Pure CSS — no JavaScript required */
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
View source code
HTML
<div class="demo-preview">
  <style>
    .bevel-panel-wrap {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      padding: 10px;
    }
    .bevel-panel {
      clip-path: url(#bevel);
      background: linear-gradient(145deg, #1a1a3e, #0f0f2a);
      border: none;
      color: #00ffcc;
      width: 130px;
      height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: 'Courier New', monospace;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease;
    }
    .bevel-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      clip-path: url(#bevel);
      background: linear-gradient(145deg, rgba(0,255,204,0.15), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .bevel-panel:hover::before {
      opacity: 1;
    }
    .bevel-panel:hover {
      color: #00ffee;
      text-shadow: 0 0 8px rgba(0,255,204,0.8);
    }
    .bevel-panel .bp-val {
      font-size: 1.4rem;
      margin-bottom: 2px;
    }
    .bevel-panel .bp-label {
      opacity: 0.7;
      font-size: 0.55rem;
    }
    .bevel-panel:nth-child(2) {
      color: #ff6b9d;
    }
    .bevel-panel:nth-child(2):hover {
      color: #ff85b1;
      text-shadow: 0 0 8px rgba(255,107,157,0.8);
    }
    .bevel-panel:nth-child(2)::before {
      background: linear-gradient(145deg, rgba(255,107,157,0.15), transparent);
    }
  </style>
  <div class="bevel-panel-wrap">
    <div class="bevel-panel">
      <span class="bp-val">87%</span>
      <span class="bp-label">CPU Load</span>
    </div>
    <div class="bevel-panel">
      <span class="bp-val">42&deg;C</span>
      <span class="bp-label">Core Temp</span>
    </div>
    <div class="bevel-panel">
      <span class="bp-val">3.2G</span>
      <span class="bp-label">Memory</span>
    </div>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(224, 229, 236);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.bevel-panel-wrap {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
}

.bevel-panel {
  clip-path: url(#bevel);
  background: linear-gradient(145deg, #1a1a3e, #0f0f2a);
  border: none;
  color: #00ffcc;
  width: 130px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.bevel-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: url(#bevel);
  background: linear-gradient(145deg, rgba(0, 255, 204, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bevel-panel:hover::before {
  opacity: 1;
}

.bevel-panel:hover {
  color: #00ffee;
  text-shadow: 0 0 8px rgba(0, 255, 204, 0.8);
}

.bevel-panel .bp-val {
  font-size: 1.4rem;
  margin-bottom: 2px;
}

.bevel-panel .bp-label {
  opacity: 0.7;
  font-size: 0.55rem;
}

.bevel-panel:nth-child(2) {
  color: #ff6b9d;
}

.bevel-panel:nth-child(2):hover {
  color: #ff85b1;
  text-shadow: 0 0 8px rgba(255, 107, 157, 0.8);
}

.bevel-panel:nth-child(2)::before {
  background: linear-gradient(145deg, rgba(255, 107, 157, 0.15), transparent);
}
JavaScript
/* Pure CSS — no JavaScript required */

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
View source code
HTML
<div class="demo-preview">
  <div class="lgr-scene" id="lgrScene">
    <div class="lgr-bg">
      <span class="lgr-blob lgr-blob--1"></span>
      <span class="lgr-blob lgr-blob--2"></span>
      <span class="lgr-blob lgr-blob--3"></span>
      <span class="lgr-blob lgr-blob--4"></span>
    </div>
    <div class="lgr-glass" id="lgrGlass">
      <h3>Liquid Glass</h3>
      <p>Light refracts through the surface. Move your mouse.</p>
    </div>
  </div>
  <svg width="0" height="0" aria-hidden="true" style="position:absolute">
    <filter id="lgrRefract" x="-20%" y="-20%" width="140%" height="140%">
      <feTurbulence type="fractalNoise" baseFrequency="0.009 0.013" numOctaves="2" seed="7" result="noise">
        <animate attributeName="baseFrequency" dur="22s" values="0.009 0.013; 0.013 0.009; 0.009 0.013" repeatCount="indefinite"/>
      </feTurbulence>
      <feGaussianBlur in="noise" stdDeviation="1.4" result="sturb"/>
      <feDisplacementMap id="lgrDisp" in="SourceGraphic" in2="sturb" scale="26" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </svg>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(224, 229, 236);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.lgr-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  background: #0b1024;
}

.lgr-bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
  filter: saturate(1.1);
}

.lgr-blob {
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.95;
  animation: lgr-float 14s ease-in-out infinite;
}

.lgr-blob--1 {
  background: #ff5d8f;
  top: -6%;
  left: 4%;
}

.lgr-blob--2 {
  background: #5d9bff;
  bottom: -8%;
  right: 2%;
  animation-delay: -4s;
}

.lgr-blob--3 {
  background: #3ad6b3;
  top: 28%;
  left: 38%;
  animation-delay: -8s;
}

.lgr-blob--4 {
  background: #c77dff;
  bottom: 10%;
  left: 10%;
  animation-delay: -11s;
}

.lgr-glass {
  position: relative;
  z-index: 2;
  width: min(72%, 340px);
  padding: 30px 28px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(135deg, oklch(0.98 0.02 255 / 0.20), oklch(0.94 0.04 300 / 0.07));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -2px 6px rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(var(--lgr-blur, 8px)) saturate(180%) url(#lgrRefract);
  backdrop-filter: blur(var(--lgr-blur, 8px)) saturate(180%) url(#lgrRefract);
  overflow: hidden;
}

.lgr-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120px 120px at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, 0.45), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.8;
  transition: opacity .3s;
}

.lgr-glass h3 {
  margin: 0 0 6px;
  font-size: 19px;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.lgr-glass p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lgr-glass {
    background: rgba(20, 22, 40, 0.86);
    border-color: rgba(255, 255, 255, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lgr-blob {
    animation: none;
  }

  .lgr-glass::after {
    opacity: 0.5;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .lgr-glass {
    background: #14162a;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.4);
  }

  .lgr-glass::after {
    display: none;
  }
}

@keyframes lgr-float {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(12%, 8%) scale(1.12);
  }

  66% {
    transform: translate(-8%, -10%) scale(0.94);
  }
}
JavaScript
(function() {
  /* ============================================================
     Sprint juillet 2026 — JS effets glassmorphism (5 IIFE scopées)
  ============================================================ */

  /* fx-0788 : Liquid Glass Refraction */
  (function() {
    var scene = document.getElementById('lgrScene');
    var glass = document.getElementById('lgrGlass');
    var disp = document.getElementById('lgrDisp');
    if (!scene || !glass) return;

    var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    glass.addEventListener('pointermove', function(e) {
      if (reduceMotion) return;
      var r = glass.getBoundingClientRect();
      glass.style.setProperty('--mx', ((e.clientX - r.left) / r.width * 100) + '%');
      glass.style.setProperty('--my', ((e.clientY - r.top) / r.height * 100) + '%');
    });
    glass.addEventListener('pointerleave', function() {
      glass.style.setProperty('--mx', '30%');
      glass.style.setProperty('--my', '20%');
    });

    if (reduceMotion) {
      try {
        document.querySelector('svg').pauseAnimations();
      } catch (e) {}
    }
  })();
})();

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