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

1. Press Download .html (or Copy code and save it as a.htmlfile).
2. Open that file in your browser — the glass already works (all browsers).
3. Inside, replace#your-background with your own image or section.

Individual files (advanced)

Generated CSS

Generated HTML

Generated SVG

Generated Tailwind

Generated JS (wire-up)

Controls

Filter IdSurface

Convex SquircleBalanced rounded glass

Element Type

PanelWide content surface

Width280Height180

Radius36Bezel24

Thickness120IOR1.45

Blur0.45Saturation1.15

Specular0.85Scale Multiplier1.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 package — it is a complete.html file. Open it in a browser and the glass already works.
4. Inside, swap#your-background for your own image or section — the numbered STEP comments show exactly what to keep and what to replace.

Read the base article