Aller au contenu
FreeKitX

Générateur d'Effet Verre Dépoli (Glassmorphism) et Ombres CSS - FreeKitX

Ajouter cet outil aux favoris

Enregistrez cette page dans votre navigateur

Sur téléphone, choisissez Ajouter aux favoris dans le menu Partager ou le menu du navigateur.

Concevez des interfaces en verre dépoli modernes avec flou d'arrière-plan, ombres douces et export CSS prêt à l'emploi.

Générateur d'Effet Verre Dépoli et Ombres CSS

Gratuit · Traitement local

Créez des effets de verre dépoli modernes, des ombres multicouches et des ombres de texte avec aperçu en temps réel et exportez du CSS prêt pour la production.

Préréglages de Style

5

Paramètres du Verre Dépoli

16 px
px

Contrôle la force du flou appliqué derrière la surface.

25 %
%

Contrôle la transparence du fond de la surface générée.

#ffffff

Définit la couleur de base de la surface translucide.

1 px
px

Définit l’épaisseur de la bordure de la surface.

30 %
%

Contrôle la visibilité de la bordure de la surface.

#ffffff

Définit la couleur de la bordure de la surface.

16 px
px

Arrondit les angles de la surface générée.

Zone de Prévisualisation Interactive
Rendu Temps Réel

Rendu Temps Réel: Verre Dépoli (Glass) · Total des Couches: 1

Fond de la Zone

Code CSS Généré

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

Outils associés

Réponse directe

Ce générateur CSS calcule des effets de verre dépoli semi-transparents en combinant la propriété backdrop-filter: blur(), des couleurs d'arrière-plan translucides, des bordures lumineuses et des ombres portées douces.

Comment utiliser cet outil

1

Régler le flou et la transparence

Ajustez le rayon de flou (blur) d'arrière-plan et le niveau d'opacité de la surface vitrée.

2

Configurer les bordures et reflets

Ajoutez une fine bordure blanche translucide pour simuler le biseau et la réfraction de la lumière sur le verre.

3

Équilibrer les ombres portées

Ajustez la diffusion et la couleur de l'ombre portée pour détacher élégamment la carte de son arrière-plan.

4

Copier le code CSS généré

Copiez les déclarations CSS prêtes pour la production, incluant les préfixes constructeurs nécessaires.

Backdrop-filter CSS et composition de couches visuelles

L'illusion de verre dépoli repose sur le filtrage graphique accéléré par GPU du contenu situé sous l'élément DOM. L'association d'un flou gaussien et d'une fine bordure claire crée une impression de profondeur réaliste.

backdrop-filter: blur(16px) saturate(180%); background: rgba(255, 255, 255, 0.25);
  • La propriété backdrop-filter exige un arrière-plan translucide (rgba ou hsla) sur l'élément pour être perceptible.
  • Une légère augmentation de saturation (saturate) ravive les couleurs filtrées en arrière-plan.

Exemples pratiques

Carte d'interface en verre pour tableau de bord moderne

Entrée : Flou : 12px, Fond : rgba(255, 255, 255, 0,2), Bordure : 1px solid rgba(255, 255, 255, 0,3), Ombre : 0 8px 32px rgba(0,0,0,0,1)

Sortie : Règles CSS complètes avec support backdrop-filter et -webkit-backdrop-filter

Crée une carte d'interface élégante qui flotte au-dessus d'un arrière-plan coloré ou animé.

Limites

  • Sur les navigateurs très anciens ou en mode économie d'énergie, backdrop-filter peut être désactivé par le système d'exploitation.
  • Sur un fond uni sans texture, dégradé ou image, l'effet de flou n'est pas discernable visuellement.

Questions fréquentes

Pourquoi l'effet nécessite-t-il le préfixe -webkit-backdrop-filter ?

Les navigateurs basés sur le moteur WebKit, notamment Safari sous macOS et iOS, requièrent ce préfixe pour activer l'accélération matérielle du flou d'arrière-plan.

Un flou d'arrière-plan élevé ralentit-il les performances d'affichage du site ?

Des rayons de flou excessifs sur de très larges surfaces peuvent solliciter le processeur graphique lors du défilement ; des valeurs modérées entre 8px et 20px offrent le compromis idéal.

Références et normes faisant autorité