GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

Liquid Glass Effect CSS: 9 Refraction Patterns

· Godrich · 9 items · 25 min read

Creative UIVanilla JSHoverClickNavigation

A liquid glass effect css panel bends only its edges. The edge color split in item 03, the elastic snap-back in item 04, and the pressed-thickness change in

Refraction Lens That Bends Only the Glass Edge01 liquid-glass-edge-refraction-lens Specular Highlight That Follows the Pointer02 liquid-glass-specular-highlight-follow Glass Whose Edge Splits Into Fringed Color03 liquid-glass-chromatic-edge-fringe Glass That Stretches When Dragged and Snaps Back Elastically04 liquid-glass-elastic-morph-drag Glass Whose Tint Adapts to Background Brightness05 liquid-glass-adaptive-tint-luminance Glass Panels That Reveal Depth as They Stack06 liquid-glass-panel-stack-depth Glass Where Surface Refraction Ripples Out From the Pressed Spot07 liquid-glass-ripple-touch-press Button Whose Convexity Shrinks by the Amount It's Pressed08 liquid-glass-button-press-squeeze Top Glass Navbar Scene That Responds to the Scroll Value09 liquid-glass-hero-navbar-scene

Auto-plays · click a tile to jump to its section · all nine in one zip

9 Liquid Glass Effects — How One Refraction Calculation Reshapes Panel Depth

Every panel below reads how far a pixel sits from the panel's own border and pushes the sampled background inward by that amount — nothing further inside the panel ever moves. Item 01 multiplies that edge factor by a single strength value and stops there. Items 02 through 07 add exactly one more term on top of the same edge read: a highlight position, a per-channel color offset, a decay timer, a luminance reading, a draw-order slot, or a distance-based wave. Item 08 runs the same bend math on a dome instead of a flat rectangle, and item 09 reuses it on a strip that only reacts while the page scrolls. The order below moves from the bare calculation to every value it ends up carrying.

01Refraction Lens That Bends Only the Glass Edge

The panel's center shows the background exactly as it is behind it, while only the outer edge thickness bends that same background inward toward the panel. GLASS_REFRACTION_STRENGTH sets how far boxEdgeSample()'s edge factor pushes the sampled pixel, so raising this one number alone presses the bend in deeper without ever touching the center.

Refraction Lens That Bends Only the Glass Edge
Open in a new tab

01 · Refraction Lens That Bends Only the Glass Edge — Measured area 23.072% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

GLASS_REFRACTION_STRENGTHboxEdgeSamplepanX
  var PANEL_X0 = 20, PANEL_Y0 = 16, PANEL_X1 = 140, PANEL_Y1 = 84;
  var EDGE_BAND = 16;
  var GLASS_REFRACTION_STRENGTH = 8;
  var SCENE_OFFSET_X = (SCENE_W - CALC_W) / 2;
  var PAN_AMP = 34;
  var PERIOD_MS = 2000;

  function boxEdgeSample(x, y, x0, y0, x1, y1, band) {
    var dl = x - x0, dr = x1 - x, dt = y - y0, db = y1 - y;
    var dmin = Math.min(dl, dr, dt, db);
    if (dmin >= band || dmin < 0) return { f: 0, nx: 0, ny: 0 };
    var nx = 0, ny = 0;
    if (dl < band) nx -= (band - dl);
    if (dr < band) nx += (band - dr);
    if (dt < band) ny -= (band - dt);
    if (db < band) ny += (band - db);
    var len = Math.sqrt(nx * nx + ny * ny);
    if (len > 0.0001) { nx /= len; ny /= len; }
    return { f: Math.max(0, (band - dmin) / band), nx: nx, ny: ny };
  }

Measured: 23.1% cumulative area, 40.5 average intensity, 23/23 frames moved.

02Specular Highlight That Follows the Pointer

A bright reflective band moves to match wherever the pointer currently sits over the panel, and drifts along the same diagonal on its own once the pointer leaves. virtualCenter() sweeps that diagonal position back and forth, while HIGHLIGHT_BAND sets how tight the exponential falloff draws the bright band around it, on top of the same edge bend boxEdgeSample() already supplies.

Specular Highlight That Follows the Pointer
Open in a new tab

02 · Specular Highlight That Follows the Pointer — Measured area 39.642% · moving frames 20/23Original by GODRICH · SCSS and React ship in the zip · See the password

virtualCenterpointerDiagHIGHLIGHT_BAND
  function renderFrame(t) {
    var center = pointerActive ? pointerDiag : virtualCenter(t);
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var rgb;
        if (x >= PANEL_X0 && x <= PANEL_X1 && y >= PANEL_Y0 && y <= PANEL_Y1) {
          var e = boxEdgeSample(x, y, PANEL_X0, PANEL_Y0, PANEL_X1, PANEL_Y1, EDGE_BAND);
          var mag = e.f * GLASS_EDGE_BEND;
          rgb = sampleScene(x - e.nx * mag, y - e.ny * mag);
          var d = ((x - PANEL_X0) + (y - PANEL_Y0)) / DIAG_SPAN;
          var diff = (d - center) / HIGHLIGHT_BAND;
          var shine = Math.exp(-diff * diff) * HIGHLIGHT_MAX;
          rgb = [Math.min(255, rgb[0] + shine), Math.min(255, rgb[1] + shine), Math.min(255, rgb[2] + shine)];

Measured: 39.6% cumulative area, 57.7 average intensity, 20/23 frames moved.

03Glass Whose Edge Splits Into Fringed Color

Toward the panel's edge, the background's red, green, and blue channels visibly slip apart from each other and overlap, the way a cheap camera lens fringes a bright edge. GLASS_CHROMA_SHIFT_PX sets how far the three channels are sampled apart on top of the same GLASS_BASE_BEND edge bend, so raising it alone slides the colors further out of register.

Glass Whose Edge Splits Into Fringed Color
Open in a new tab

03 · Glass Whose Edge Splits Into Fringed Color — Measured area 51.8% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

GLASS_CHROMA_SHIFT_PXsampleChannelboxEdgeSample
  function renderFrame(t) {
    var pan = panX(t);
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var baseSx = x + SCENE_OFFSET_X + pan;
        if (x >= PANEL_X0 && x <= PANEL_X1 && y >= PANEL_Y0 && y <= PANEL_Y1) {
          var e = boxEdgeSample(x, y, PANEL_X0, PANEL_Y0, PANEL_X1, PANEL_Y1, EDGE_BAND);
          var mag = e.f * GLASS_BASE_BEND;
          var chroma = e.f * GLASS_CHROMA_SHIFT_PX * 6;
          var rC = sampleChannel(baseSx - e.nx * (mag + chroma), y - e.ny * (mag + chroma), 0);
          var gC = sampleChannel(baseSx - e.nx * mag, y - e.ny * mag, 1);
          var bC = sampleChannel(baseSx - e.nx * (mag - chroma), y - e.ny * (mag - chroma), 2);
          outBuf[idx] = rC; outBuf[idx + 1] = gC; outBuf[idx + 2] = bC;
        } else {
          outBuf[idx] = sampleChannel(baseSx, y, 0);
          outBuf[idx + 1] = sampleChannel(baseSx, y, 1);
          outBuf[idx + 2] = sampleChannel(baseSx, y, 2);

Measured: 51.8% cumulative area, 92.3 average intensity, 23/23 frames moved.

04Glass That Stretches When Dragged and Snaps Back Elastically

While a corner is held and dragged, the panel stretches that direction, and letting go sends it overshooting past its original shape two or three times before it comes to rest, instead of easing back in a single pass. elasticSpring() multiplies an exponential decay set by GLASS_ELASTIC_RETURN_MS against a cosine oscillation set by GLASS_ELASTIC_OSC_MS, and currentOffset() keeps replaying that spring for GLASS_ELASTIC_RETURN_MS * 5 after release before handing off to the idle drag loop.

Glass That Stretches When Dragged and Snaps Back Elastically
Open in a new tab

04 · Glass That Stretches When Dragged and Snaps Back Elastically — Measured area 31.812% · moving frames 20/23Original by GODRICH · SCSS and React ship in the zip · See the password

GLASS_ELASTIC_RETURN_MScurrentOffsetvirtualOffset
  function elasticSpring(rt) {
    var decay = Math.exp(-rt / GLASS_ELASTIC_RETURN_MS);
    var osc = Math.cos((2 * Math.PI / GLASS_ELASTIC_OSC_MS) * rt);
    return decay * osc;
  }

  function virtualOffset(t) {
    var cyc = t % PERIOD_MS;
    if (cyc < DRAG_PHASE_MS) {
      var p = cyc / DRAG_PHASE_MS;
      var e = 1 - Math.pow(1 - p, 3);
      return { x: e * DRAG_MAX_X, y: e * DRAG_MAX_Y };
    }
    var rt = cyc - DRAG_PHASE_MS;
    var k = elasticSpring(rt);
    return { x: DRAG_MAX_X * k, y: DRAG_MAX_Y * k };
  }

Measured: 31.8% cumulative area, 27.7 average intensity, 20/23 frames moved.

05Glass Whose Tint Adapts to Background Brightness

When the background behind the panel is bright, the glass tint thins out, and when that background turns dark, the same tint deepens on its own. TINT_STRENGTH scales the delta between a target gray and the sampled luminance, riding on top of the same GLASS_EDGE_BEND bend that boxEdgeSample() already computes.

Glass Whose Tint Adapts to Background Brightness
Open in a new tab

05 · Glass Whose Tint Adapts to Background Brightness — Measured area 74.724% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

TINT_STRENGTHtriangleWaveboxEdgeSample
  function renderFrame(t) {
    var pan = panX(t);
    var adaptivity = triangleWave(t, PERIOD_MS);
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var baseSx = x + SCENE_OFFSET_X + pan;
        var rgb;
        if (x >= PANEL_X0 && x <= PANEL_X1 && y >= PANEL_Y0 && y <= PANEL_Y1) {
          var e = boxEdgeSample(x, y, PANEL_X0, PANEL_Y0, PANEL_X1, PANEL_Y1, EDGE_BAND);
          var bendMag = e.f * GLASS_EDGE_BEND;
          rgb = sampleScene(baseSx - e.nx * bendMag, y - e.ny * bendMag);
          var lum = 0.299 * rgb[0] + 0.587 * rgb[1] + 0.114 * rgb[2];
          var delta = (128 - lum) * TINT_STRENGTH * adaptivity * 0.5;
          rgb = [rgb[0] + delta, rgb[1] + delta * 0.94, rgb[2] + delta * 0.86];
          var shine = e.f * 18;
          rgb = [
            Math.max(0, Math.min(255, rgb[0] + shine)),
            Math.max(0, Math.min(255, rgb[1] + shine)),
            Math.max(0, Math.min(255, rgb[2] + shine))

Measured: 74.7% cumulative area, 30.6 average intensity, 23/23 frames moved.

06Glass Panels That Reveal Depth as They Stack

Each time another panel stacks in behind the front one, depthFor() eases that panel's depth index from its old slot to its new one over STACK_TRANSITION_MS instead of snapping between them, and its refraction bend (BEND_PER_DEPTH), its blur radius (BLUR_RADIUS_PER_DEPTH), and the size and darkness of the shadow darkenBand() casts beneath it all scale with that same depth value, so panels further back read as sitting deeper and blurrier by degrees. stackOrder() still slices every two-second cycle into three equal windows to decide which panel is deepest next.

Glass Panels That Reveal Depth as They Stack
Open in a new tab

06 · Glass Panels That Reveal Depth as They Stack — Measured area 37.909% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

stackOrderdarkenBandPANELS
    var order = stackOrder(t);
    for (var oi = 0; oi < order.length; oi += 1) {
      var panelIdx = order[oi];
      var p = PANELS[panelIdx];
      var depth = depthFor(panelIdx, t);
      var bend = p.bend + depth * BEND_PER_DEPTH;
      var blurR = depth * BLUR_RADIUS_PER_DEPTH;
      var shadowSize = SHADOW_BASE_SIZE + depth * SHADOW_SIZE_PER_DEPTH;
      var shadowAlpha = SHADOW_BASE_ALPHA + depth * SHADOW_ALPHA_PER_DEPTH;
      var bobY = p.amp * Math.sin(t * 2 * Math.PI / PERIOD_MS * p.freq + p.phase);
      var x0 = p.x0, x1 = p.x1, y0 = p.y0 + bobY, y1 = p.y1 + bobY;
      darkenBand(x0, y0, x1, y1, shadowSize, shadowAlpha);
      for (var yy = Math.max(0, Math.round(y0)); yy < Math.min(CALC_H, y1); yy += 1) {
        for (var xx = Math.max(0, Math.round(x0)); xx < Math.min(CALC_W, x1); xx += 1) {
          var e = boxEdgeSample(xx, yy, x0, y0, x1, y1, EDGE_BAND);
          var mag = e.f * bend;
          var sxx = xx - e.nx * mag, syy = (yy - bobY) - e.ny * mag;

Measured: 37.9% cumulative area, 30.8 average intensity, 23/23 frames moved.

07Glass Where Surface Refraction Ripples Out From the Pressed Spot

Centered on wherever the panel was just pressed, its surface refraction spreads outward in a ring that fades out well before it reaches the edge. RIPPLE_AMPLITUDE scales the sine wave that envelope — an exponential decay over age times a radius falloff — multiplies down toward zero, and that ripple offset stacks on top of the same edge bend from item 01.

Glass Where Surface Refraction Ripples Out From the Pressed Spot
Open in a new tab

07 · Glass Where Surface Refraction Ripples Out From the Pressed Spot — Measured area 26.01% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

activePressPRESS_SCHEDULERIPPLE_AMPLITUDE
  function renderFrame(t) {
    var press = activePress(t);
    var age = Math.max(0, t - press.t);
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var rgb;
        if (x >= PANEL_X0 && x <= PANEL_X1 && y >= PANEL_Y0 && y <= PANEL_Y1) {
          var e = boxEdgeSample(x, y, PANEL_X0, PANEL_Y0, PANEL_X1, PANEL_Y1, EDGE_BAND);
          var dx = x - press.x, dy = y - press.y;
          var dist = Math.sqrt(dx * dx + dy * dy) + 0.0001;
          var envelope = Math.exp(-age / 260) * Math.max(0, 1 - dist / 95);
          var wave = Math.sin(dist * 0.3 - age * 0.02) * envelope * RIPPLE_AMPLITUDE;
          var nx = dx / dist, ny = dy / dist;
          var offX = e.nx * (e.f * GLASS_EDGE_BEND) + nx * wave;
          var offY = e.ny * (e.f * GLASS_EDGE_BEND) + ny * wave;
          rgb = sampleScene(x - offX, y - offY);
          var shine = e.f * 16 + Math.max(0, wave) * 8;
          rgb = [Math.min(255, rgb[0] + shine), Math.min(255, rgb[1] + shine), Math.min(255, rgb[2] + shine)];
        } else {

Measured: 26.0% cumulative area, 22.2 average intensity, 23/23 frames moved.

08Button Whose Convexity Shrinks by the Amount It's Pressed

The button normally bulges outward to magnify the background behind it, and once it's held down, that bulge shrinks by exactly the same amount its glass thickness drops — while its cast shadow and the halo bleeding into the background around it spread wider instead of shrinking with it. squeeze eases toward SQUEEZE_MIN on press and scales the dome height, the sample offset, and the rim and lift brightness down together, while that same press drives shadowMult and haloMult up through k = 1 - squeeze, so the glass itself reads thinner even as the blur it casts underneath and around it grows.

Button Whose Convexity Shrinks by the Amount It's Pressed
Open in a new tab

08 · Button Whose Convexity Shrinks by the Amount It's Pressed — Measured area 14.814% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

wantPressedSQUEEZE_MINvirtualPressed
    var k = 1 - squeeze;
    var pressY = BTN_CY + (1 - squeeze) * 3;
    var bandStart = BAND_BASE - k * BAND_K;
    var shadowMult = SHADOW_MULT_BASE + k * SHADOW_MULT_K;
    var haloMult = HALO_MULT_BASE + k * HALO_MULT_K;
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var rgb;
        var nx = (x - BTN_CX) / BTN_HW;
        var ny = (y - pressY) / BTN_HH;
        var r2 = nx * nx + ny * ny;
        if (r2 <= 1) {
          var dome = (1 - r2) * BULGE_STRENGTH * squeeze;
          var sx = x - nx * BTN_HW * dome * 0.5;
          var sy = y - ny * BTN_HH * dome * 0.5;
          rgb = sampleScene(sx, sy);
          var rNorm = Math.sqrt(r2);
          var rim = Math.max(0, (rNorm - bandStart) / (1 - bandStart)) * RIM_MAX * squeeze;
          var lift = (1 - r2) * LIFT_MAX * squeeze;

Measured: 14.8% cumulative area, 29.7 average intensity, 23/23 frames moved.

09Top Glass Navbar Scene That Responds to the Scroll Value

The more you scroll the scene beneath it, the thicker and more frosted the glass navbar at the top reads, instead of staying at one fixed refraction. EXTRA_BEND scales on top of a fixed BASE_BEND by the scroll progress, and that same progress drives both the frost mix and a scroll-linked ripple through the navbar in a single pass.

Top Glass Navbar Scene That Responds to the Scroll Value
Open in a new tab

09 · Top Glass Navbar Scene That Responds to the Scroll Value — Measured area 74.716% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

wantProgressEXTRA_BENDtriangleWave
  function renderFrame(t, progress) {
    var panY = progress * PAN_RANGE;
    var idx = 0;
    for (var y = 0; y < CALC_H; y += 1) {
      for (var x = 0; x < CALC_W; x += 1) {
        var rgb;
        if (y >= NAV_Y0 && y <= NAV_Y1) {
          var e = boxEdgeSample(x, y, NAV_Y0 - 999, NAV_Y0, NAV_Y0 + 1998, NAV_Y1, EDGE_BAND);
          var bendMag = (BASE_BEND + EXTRA_BEND * progress) * (e.f || 1) * 0.6 + BASE_BEND * 0.4;
          var ripple = Math.sin(x * 0.16 - t * 0.006) * RIPPLE_AMP * progress;
          rgb = sampleScene(x, (y + panY) - e.ny * bendMag - ripple);
          var frost = 60 * progress;
          rgb = [
            Math.min(255, rgb[0] * (1 - progress * 0.25) + frost),
            Math.min(255, rgb[1] * (1 - progress * 0.25) + frost),
            Math.min(255, rgb[2] * (1 - progress * 0.25) + frost)
          ];
        } else {

Measured: 74.7% cumulative area, 45.4 average intensity, 23/23 frames moved.

Where a Liquid Glass Panel Fits Into an Actual Interface

The edge-only bend in item 01 reads best on a hero section glass card, where the surrounding scene needs to stay recognizable while only the card's own border reads as glass. The pointer-following highlight in item 02 belongs on a product showcase glass panel, since a static highlight would give away that nothing is actually reacting to the shopper's cursor. The chroma fringe in item 03 works as a settings modal's glass border, where a small amount of lens-like color splitting reads as premium rather than broken. The elastic drag in item 04 fits a draggable widget window that a person actually repositions, and the luminance-adaptive tint in item 05 belongs on a navigation bar that has to sit over both dark and light hero sections without a special-cased dark mode.

A liquid glass effect css generator can spit out a flat backdrop-filter blur in seconds, but none of that covers the six use cases above, because a generator has no scene to read pixels from and no press or drag state to react to. The stacking depth in item 06 suits a gallery of stacked cards, and the ripple in item 07 is built for a payment confirmation button where a person needs to feel that the tap registered. The squeeze in item 08 is a liquid glass effect button css treatment purpose-built for a submit button, and the scroll-linked bend in item 09 belongs nowhere but a site's fixed top navigation, since it has nothing to respond to without a page to scroll.

The Numbers Behind All Nine Liquid Glass Panels — Area, Intensity, Frames Moved

Item Cumulative area Intensity Frames moved
01 edge refraction lens 23.1% 40.5 23/23
02 specular highlight follow 39.6% 57.7 20/23
03 chromatic edge fringe 51.8% 92.3 23/23
04 elastic morph drag 31.8% 27.7 20/23
05 adaptive tint luminance 74.7% 30.6 23/23
06 panel stack depth 37.9% 30.8 23/23
07 ripple touch press 26.0% 22.2 23/23
08 button press squeeze 14.8% 29.7 23/23
09 hero navbar scene 74.7% 45.4 23/23

Items 05 and 09 lead the set because their bend or tint math runs across nearly the whole canvas every frame rather than inside one small rectangle, while item 08's squeeze only ever touches the small dome of a button, which is exactly why its cumulative area sits lowest at 14.8%.

Where the Values Change the Refraction — Refraction Strength, Chroma Shift Width, Elastic Return Time

Three of the nine items expose a single constant that a person can turn up or down without touching anything else in the file, and the table below is measured from actually setting each one to both ends of its range, not estimated from reading the formula.

Variant Value Feel
Adjust the refraction strength value 01 GLASS_REFRACTION_STRENGTH 8 → 28 Lowering the value keeps the background behind the panel nearly flat with almost no bend, and raising it presses the edge background inward hard enough to read as thick glass.
Adjust the chroma shift width value 03 GLASS_CHROMA_SHIFT_PX 1 → 4 Lowering the value keeps the edge color crisp with almost no split, and raising it makes the red, green, and blue visibly slip apart and overlap.
Adjust the elastic return time value 04 GLASS_ELASTIC_RETURN_MS 180 → 520 Lowering the value makes it stop almost immediately on release with barely any wobble, and raising it draws out several long wobbles before it settles back into shape.

Where It Breaks — Reduced Motion Settings, Frame Drops on Low-End Devices, Use Without a Background

Every one of these nine reads and writes a pixel buffer with getImageData()/putImageData() once per frame, so the render cost scales with the buffer's own area rather than with how complex any single formula looks — item 05's and item 09's near-full-canvas reach is exactly why they're the two heaviest entries in the table above, and a low-end phone is where that cost shows up first as dropped frames. Password k28ehrdh behind the zip below unlocks every one of these nine index.html/style.scss pairs so you can drop your own image behind them and watch that cost for yourself instead of taking this paragraph's word for it. None of the nine reads anything meaningful with a flat, single-color background in place of a real scene, since the edge bend, the chroma split, and the tint all sample actual neighboring pixels — over one flat color, every one of those samples returns that same flat color, and the glass effect simply disappears.

Keyboard Support and Reduced-Motion Behavior Across These Nine Panels

Every item checks window.matchMedia('(prefers-reduced-motion: reduce)').matches once on load, and when that's true it removes the .is-demo class instead of hiding the panel outright, so the seeded auto-demo animation freezes on a single still frame rather than looping. Items 07 and 08 stay interactive even with reduced motion on: both attach a keydown handler for Enter and Space alongside pointerdown, so pressing either key still triggers the ripple or the squeeze on demand. Item 09 keeps its own keydown handler too, moving the scroll progress with ArrowUp/ArrowDown and PageUp/PageDown in addition to its wheel listener, so a keyboard-only visitor can still see the navbar thicken without ever touching a mouse wheel. Every brightened highlight and tint shift in items 02 and 05 stays additive rather than replacing the base color outright, which keeps whatever text sits on the glass readable against the panel instead of washing it out.

How Is a Liquid Glass Effect Different From Glassmorphism?

A general glassmorphism panel is a backdrop-filter: blur() layer with a translucent fill — the same blur value applies evenly across the whole panel regardless of what sits behind any particular pixel. A liquid glass effect css panel like these nine instead reads the actual pixels around each point with getImageData() and displaces them by a calculated amount, so the distortion changes across the panel's own surface — thicker at a pressed spot, sharper at an edge, tinted differently over a bright patch than a dark one. The two can sit on the same page, but only one of them is actually calculating anything per pixel. For a closer look at the panel itself rather than the refraction math, 9 CSS Glassmorphism Effects to Copy-Paste covers the blur-and-fill side on its own.

Nearby Patterns Worth Comparing

HTML5 Canvas Animation: 9 Warp & Droplet Effects reads and displaces a pixel buffer the same way item 07's ripple does here, but bends a whole scene instead of just a panel's own edge. Rainbow Gradient Background CSS: 9 Patterns shares the same per-item single-value tuning shown in the table above, just driving color instead of refraction.

Common Questions About Liquid Glass Refraction Before You Ship It

Do I need WebGL or a canvas library to build any of these nine?

No — every panel here is a plain <canvas> element read and written with the 2D context's own getImageData()/putImageData(), with zero WebGL calls and zero external libraries anywhere in the nine files.

Can I try a liquid glass effect css codepen instead of copying the code straight from this page?

You can, but a codepen embed still has to run the same boxEdgeSample() math shown above to get a real edge-only bend — copying the nine files from the zip guarantees you're starting from the exact measured version in the table rather than a simplified rewrite.

Why does item 08's convexity shrink instead of just fading out on press?

Because squeeze multiplies the dome height, the sample offset, and the rim and lift brightness all at once, so a lower squeeze value reads as the button's glass physically thinning under a fingertip rather than the highlight simply dimming.

Enter the archive password

The password is inside this article. You will find it as you read.