EN
PortuguêsEnglishEspañol
All tools
Developer tools 100% free

Glassmorphism generator (frosted glass)

Adjust the blur, transparency and border until the card looks like glass over the background. Change the background to test and copy the CSS.

How to use

Thank you so much for helping!

Every donation helps pay for the servers and keeps the tools free for everyone. Pick or type an amount:

Secure payment by Stripe. Opens in a new tab.
Back to CSS and design

Frosted glass effect

Glass cardThe background appears blurred behind this card.

Available in: PortuguêsEnglish

Advertisement

Glassmorphism generator (frosted glass): what it is for

Adjust the blur, transparency, saturation, glass color, border and corners. The preview shows the card over a gradient with shapes, a landscape, a dark background or your own photo.

The CSS comes out with backdrop-filter and the -webkit- prefix for Safari, plus a more opaque fallback color for browsers that do not support blur.

How to use

  1. Adjust blur, transparency and border.
  2. Change the preview background or use your photo.
  3. Copy the CSS and apply the vidro class.

When to use it

  • Headers and menus with a glass background.
  • Featured cards over photos.
  • Interfaces with a modern look.

Frequently asked questions

Does it work in every browser?

backdrop-filter works in current browsers (Chrome, Edge, Safari and Firefox). The code includes the -webkit- prefix for Safari and a more opaque fallback background color for when blur is not supported.

Why can't I see the glass?

The effect only shows if there is something colorful or detailed behind the card: a photo, gradient or shapes. Over a plain white background, frosted glass looks like just a white card.

Does it affect performance?

A little: the browser has to blur what is behind. Use it on a few elements (header, featured cards) and avoid it in long lists or on low-end phones.

Is it really free?

Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

Similar tools

Scroll reveal animation (pure CSS)Generate the effect of elements appearing as the page scrolls (scroll reveal) in pure CSS, with animation-timeline: view(): fade in, slide up, slide in from the sides, grow or unblur, with adjustable distance and scroll range, and without hiding anything in browsers that do not support it yet.Open →
CSS clamp() calculator for fluid typographyCalculate the CSS clamp() for text and spacing that grows with the screen width: enter the size on mobile and on desktop and the screen widths, and copy the value in rem, with a preview and a zoom accessibility warning.Open →
Google Fonts pairingsTry Google Fonts pairings for your website's headings and body text: pick a ready-made pair or build your own, see the preview with your text and copy the loading link and the CSS.Open →
Color contrast checker (WCAG)Check whether your text color has enough contrast with the background under the WCAG AA and AAA accessibility rules, with a live preview.Open →
Color converterConvert colors between HEX, RGB, HSL and CMYK and see lighter and darker shades.Open →
HEX color to Tailwind classFind out which color in the default Tailwind CSS (v3) palette is closest to your HEX or RGB color, with the perceptual distance and the five nearest options, or use the exact value with bracket syntax.Open →

The tools are provided as is, without warranty. We are not responsible for the results or for how they are used.