Paramètres
Flou 12 px, opacité 0,15, arrière-plan #ffffff
CSS
backdrop-filter: blur(12px); background: rgba(255,255,255,0.15);
Outils de design
Générateur de glassmorphisme — CSS backdrop-filter
Ajustez visuellement le flou, l'opacité, la couleur d'arrière-plan et l'opacité des bordures pour générer du CSS en verre dépoli avec un préfixe -webkit. Utile pour les cartes, les barres de navigation et les calques modaux.
CSSGlassmorphismbackdrop-filter
Ajouter cet outil aux favoris
Aucun mode de stockage des favoris n’a été sélectionné.
Actions rapides
Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.
设计配色
Générateur de glassmorphisme
Glassmorphism
毛玻璃效果预览
12px
0.15
0.20
CSS 已生成。
Cas d’usage
- Ajouter un panneau flou translucide à une carte
- Barre de navigation de débogage superposition de verre
- Exporter le CSS backdrop-filter prêt à coller
Mode d’emploi
- Ajuster le flou, l'opacité, la couleur d'arrière-plan et l'opacité de la bordure
- Vérifier l'aperçu
- Copier ou exporter le CSS généré
Exemples d’entrée et de sortie
FAQ
Quels navigateurs sont pris en charge ?
La prise en charge de backdrop-filter est requise. L'outil génère à la fois la propriété standard et -webkit-backdrop-filter.
En quoi cela diffère-t-il du css-glassmorphism ?
Cet outil se concentre sur la génération rapide de paramètres courants de flou, d'opacité et de bordure. L'outil associé peut être utilisé pour une exploration de style supplémentaire.
Outils
Outils associés
Poursuivez avec un autre outil traduit pour une tâche proche.
Générateur d'ombres de boîte CSS
Générateur d'ombres de boîte CSS – Commandes visuelles
Ajustez visuellement le décalage, le flou, la répartition, la couleur, l'opacité et l'encart. Prévisualisez en direct et générez du CSS box-shadow pour les cartes, les boutons et les superpositions.
CSS Ombre box-shadow
Générateur de dégradé CSS
Générateur de dégradé CSS – Linéaire, Radial, Conique
Créez visuellement des dégradés CSS linéaires, radiaux et coniques. Ajustez l'angle et les positions des arrêts, ajoutez plusieurs arrêts et copiez le CSS pour les arrière-plans, les boutons et les transitions de marque.
CSS Dégradé Arrière-plan
Glassmorphisme CSS
Glassmorphisme CSS — Générateur de cartes en verre dépoli
Ajustez la couleur, l'opacité, le flou et le contour pour prévisualiser et générer du CSS de carte en verre dépoli avec backdrop-filter. Utile pour les panneaux translucides et les couches de navigation ; tout s'exécute dans le navigateur.
CSS Glassmorphism backdrop-filter