Tooling

SVG Generator

Tune the surface, preview the distortion in motion, and download the filter with the base CSS helpers needed to wire the glass layer into a real component.

Preview Layer

Export

Export Package

Generated CSS

Generated HTML

Generated SVG

Generated Tailwind

Controls

Filter Id Surface

Convex Squircle Balanced rounded glass

Element Type

Panel Wide content surface

Width 280 Height 180

Radius 36 Bezel 24

Thickness 120 IOR 1.45

Blur 0.45 Saturation 1.15

Specular 0.85 Scale Multiplier 1.35

Preview Behavior

1. Adjust the surface with the sliders until the distortion feels balanced.
2. Press and drag the glass panel to inspect edge refraction and blur falloff.
3. Download the generated package when the preview looks right.
4. Use the exported SVG together with the CSS helpers inside any cloned backdrop glass component.

Read the base article