Liquid Glass generator

Apple's Liquid Glass bends whatever is behind it at the edges, like a drop of water. This page gives you two things: CSS and SVG you can paste into a web page, and a short Liquid Glass video you can download as MP4. Both run entirely in your browser; nothing is uploaded.

Liquid Glass in CSS

Drag the glass around and set it up on the right. The preview is the code below, running as is.

Liquid Glassdrag the glass

HTML + CSS



How it works


The glass is an element with a backdrop-filter that points at an SVG filter. The filter blurs what is behind the element, then pushes each pixel sideways using a displacement map: a small image, made for this exact size and shape, that leaves the middle alone and pushes harder the closer a pixel is to the rim. That is what makes the edge bend the background instead of just frosting it. A few inset shadows add the highlight on the rim.


Refraction through backdrop-filter works in Chrome, Edge, Brave, Arc and other Chromium browsers. Safari and Firefox don't apply SVG filters to the backdrop yet, so the code gives them a frosted version of the same glass instead. The map is drawn for one size: if you change the element's size, make a new one here.



A Liquid Glass video



  
  

    
This is the real Liquid Glass style from ultramotion: glass that pops, stretches, merges and bends the title behind it, drawn with WebGL. Type your title and download a 1080×1920 MP4.

    
    
    

      
      
    

    

    

    
The download is silent. With the skill, your agent also writes music for it, timed to every pop and merge.

  





Make a whole video in this style


The generator makes one shot. For a full launch video, app demo or talking-head background in Liquid Glass, with music, install the skill and ask your agent (Claude Code, ChatGPT Codex or any agent that loads skills).


npx skills add sunsiyuan/ultramotion


For example: "Make a 15-second launch video for our app in the Liquid Glass style." See the Liquid Glass style for examples, or read how ultramotion compares with HyperFrames.