Skip to content

Colore e design

Generatore Glassmorphism

Frosted-glass UI cards with backdrop-filter.

Runs in your browser

Frosted glass

.glass

CSS
.glass {
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

Nota dell'editore

Understanding · Frosted glass, in three CSS properties.

Questo capitolo approfondito è attualmente disponibile solo in inglese. Lo strumento di conversione qui sopra funziona nella tua lingua; il lungo articolo esplicativo non è stato ancora tradotto.

Domande frequenti

Quick answers.

›Which CSS property creates the glass effect?

The primary property is `backdrop-filter: blur()`, which applies the blur to the area behind the element rather than the element itself. This is usually paired with a semi-transparent `background-color` using RGBA or HSLA values.

›Does this work in all browsers?

Most modern browsers support `backdrop-filter`. Firefox occasionally requires the `layout.css.backdrop-filter.enabled` flag to be set to true in older versions, so including a fallback background colour is recommended.

›Why does the blur not appear in my project?

Ensure the element has a transparent or semi-transparent background. If the background is fully opaque, the blur effect happening behind the element will be hidden from view.

›Can I use this for production UI components?

Yes. Glassmorphism is a common design pattern for cards, navigation bars, and modals. The generated CSS is standard-compliant and ready for use in any stylesheet.

Le persone cercano anche

Strumenti correlati

More in this room.

Vedi tutto in Colore e design