Aller au contenu principal
ToolsByUs

Générateur de glassmorphism

Concevez un panneau de verre dépoli en réglant le flou, la saturation, la teinte, la bordure, l’arrondi et l’ombre. Copiez le CSS ou les classes Tailwind, ou téléchargez un PNG de l’aperçu. Vous pouvez inclure une version opaque de la teinte choisie pour les navigateurs qui signalent une préférence de transparence réduite.

100 % local

Préréglages

Choisissez un préréglage pour régler tous les contrôles d’un coup, puis ajustez.

Couleur de teinte
Reflet

CSS

.glass {
  border-radius: 24px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background-color: rgb(255 255 255 / 0.12);
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.28);
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background-color: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

backdrop-filter floute ce qui est peint derrière l’élément : la page, une image, un autre composant. Placez un aplat ou un dégradé derrière la vitre dans l’aperçu pour voir le rendu réel.

Classes Tailwind

rounded-[24px] border-[1px] border-[color:rgb(255_255_255_/_0.25)] bg-[rgb(255_255_255_/_0.12)] backdrop-blur-[20px] backdrop-saturate-[1.80] shadow-[0_8px_32px_rgb(0_0_0_/_0.28)] bg-clip-padding [@media(prefers-reduced-transparency:reduce)]:bg-[rgb(255_255_255_/_1)] [@media(prefers-reduced-transparency:reduce)]:[backdrop-filter:none] [@media(prefers-reduced-transparency:reduce)]:[-webkit-backdrop-filter:none]

L’export inclut backdrop-filter avec et sans préfixe pour les anciens navigateurs.

Comment fonctionne Générateur de glassmorphism ?

`backdrop-filter` floute et modifie la saturation de ce qui apparaît derrière le panneau. Une couleur translucide apporte la teinte et une bordure claire souligne le contour. L’aspect final dépend de ces réglages et du fond de votre page.

Le CSS inclut `backdrop-filter` et `-webkit-backdrop-filter` pour les navigateurs plus anciens. `background-clip: padding-box` garde la teinte à l’intérieur de la bordure. La prise en charge des filtres et des préférences varie selon le navigateur.

L’aperçu utilise son propre fond et des filtres SVG avec les mêmes valeurs de flou, de saturation et d’opacité. Le PNG est généré à partir de ce SVG. Sur votre page, le CSS filtre le contenu réellement placé derrière le panneau.

Si vous activez l’alternative de transparence réduite, l’export utilise la teinte sélectionnée sans transparence et désactive les deux filtres dans `prefers-reduced-transparency`. La préférence dépend du navigateur et du système d’exploitation. Vérifiez le contraste dans les deux variantes et testez les performances des grands panneaux.

Paramètres du panneau

Flou 20px
Saturation 180%
Couleur de teinte #ffffff
Opacité de la teinte 0.12
Rayon 24px

CSS généré

.glass {
  border-radius: 24px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background-color: rgb(255 255 255 / 0.12);
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

Quelles options et quels cas limites Générateur de glassmorphism prend en charge ?

Référence technique et options
ParamètreTypeValeur par défautComportement et cas limites
blur(Xpx)longueur20pxRègle le flou du fond. L’aperçu SVG utilise la même valeur comme écart-type du filtre gaussien.
saturate(X%)pourcentage180%Modifie la saturation du fond ; 100% conserve sa saturation d’origine.
background-colorrgb avec alphablanc à 12%Définit la teinte translucide superposée au fond filtré.
borderépaisseur et couleur1px, blanc à 25%Ajoute une bordure lumineuse dont l’épaisseur, la couleur et l’opacité sont réglables.
background-clippadding-boxactivéEmpêche la teinte de fond de se peindre sous la bordure.
Préfixe -webkit-déclaration supplémentaireactivéAjoute la propriété préfixée à la propriété standard pour les navigateurs plus anciens.
prefers-reduced-transparencyrequête médiaactivéUtilise la teinte choisie comme fond opaque et désactive le filtre lorsque le navigateur signale cette préférence.

Questions fréquentes

Comment créer un effet de verre dépoli en CSS ?

Combinez un fond translucide, `backdrop-filter: blur(20px) saturate(180%)` et une bordure claire. Le générateur ajoute aussi `-webkit-backdrop-filter` et `background-clip: padding-box`. Réglez la teinte et l’opacité pour préserver la lisibilité du texte.

Pourquoi le flou n’est-il pas visible ?

Vérifiez qu’il y a du contenu ou des variations de couleur derrière le panneau et que son fond n’est pas opaque. Vérifiez aussi la compatibilité du navigateur et si un élément parent limite la zone que le filtre peut traiter.

Quel est l’effet sur les performances ?

Le coût du rendu peut augmenter, surtout sur de grands panneaux placés devant du contenu en mouvement. Testez votre design sur les appareils visés et réduisez le flou ou la surface du panneau si l’interaction manque de fluidité.

À quoi sert `prefers-reduced-transparency` ?

Si vous activez cette option, le CSS et les classes Tailwind utilisent une version opaque de la teinte choisie et désactivent le filtre lorsque le navigateur signale cette préférence. La prise en charge varie selon le navigateur et le système d’exploitation. Vérifiez aussi le contraste sur le fond opaque.

L’aperçu reproduit-il le CSS exporté ?

Il reproduit les mêmes réglages sur un fond d’exemple avec des filtres SVG, puis ce SVG sert à créer le PNG. Le CSS applique l’effet au fond réel de votre page : son aspect peut donc changer si ce fond est différent.

Pourquoi le panneau paraît-il gris ou manque-t-il de contraste ?

Une teinte neutre ou très transparente sur un fond uniforme peut rendre l’effet discret. Essayez une autre teinte, augmentez son opacité ou changez le fond. Vérifiez la lisibilité du texte : le flou seul ne garantit pas un contraste suffisant.

Équipe ToolsByUs · Comment nous vérifions nos outils