Générateur de verre de CSS

Créez le look givré visuellement — flou de l'accord, transparence, saturation, bordure et ombre, puis copiez CSS prêt à la production.

How to use Glassmorphism Generator

1. Choisissez un fond clair ou sombre, puis définissez le flou et les quantités de saturation.
2. Choisissez une couleur de remplissage et ajustez son opacité afin que l'arrière-plan s'affiche.
3. Alignez l'opacité de la bordure, le rayon d'angle et l'ombre de chute optionnelle jusqu'à ce que la carte semble droite.
4. Cliquez sur Copier le CSS pour copier le jeu de règles complet, y compris le repli -webkit-backdrop-filter.

Quel est {nom} ?

FAQ

Pourquoi mon effet verre ressemble-t-il à une couleur plate ?

fond-filtre ne brouille que le contenu assis derrière l'élément. S'il n'y a rien de coloré ou occupé derrière votre carte, le flou n'a rien à travailler avec. Placez la carte en verre sur une image ou un dégradé vif pour voir l'effet.

Ai-je besoin de la ligne -webkit-backdrop-filter?

Oui, pour Safari. Les navigateurs WebKit, en particulier iOS, nécessitent toujours le préfixe -webkit-backdrop-filter. Ce générateur l'inclut automatiquement aux côtés de la propriété standard.

Le filtre de fond est-il largement soutenu?

Il fonctionne dans toutes les versions actuelles de Chrome, Edge, Firefox et Safari. Pour les navigateurs très anciens, l'élément montre simplement son fond semi-transparent sans le flou, qui dégrade gracieusement.

Related tools

• Border Radius Generator
• CSS Gradient Generator
• Box Shadow Generator
• Color Palette Generator