Glass Effect Generator

Frosted glass, ready to paste.

Glass Effect Generator — make frosty glass cards with blur, tint, refraction and distortion, then copy ready CSS and JS.

How to use Glass Effect Generator

  1. Pick a shape and a background scene for the preview
  2. Adjust tint, blur, refraction, distortion, opacity, border and shadow
  3. Preview the glass card over the scene and try a preset
  4. Copy the CSS snippet or the JS snippet, or download it as a file
  5. Paste the snippet into your own page and apply the glass class to any element

Features

  • Rounded, circle and pill glass shapes with live preview
  • Tint, blur, saturation, brightness, refraction and distortion controls
  • Opacity, border and shadow controls for a finished glass look
  • Three switchable background scenes to test the effect
  • Copyable CSS snippet and JS snippet, plus file download
  • Four one-click presets and a seeded random style button

Frequently asked questions

Is it free?

Yes, unlimited.

Login to use this free online tool. Create a free account to get started.