Paramètres
flou 18 px / alpha 0,3
Sortie
backdrop-filter: blur(18px)
Outils de design
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.
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.
设计配色
Glassmorphisme CSS
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.
GLASS
生成 CSS 代码
Cas d’usage
- Créer des arrière-plans de cartes translucides
- Ajuster les paramètres de backdrop-filter
- Exporter les styles de panneau et de calque de navigation
Mode d’emploi
- Ajuster la couleur et l'opacité
- Définir le flou et le contour
- Prévisualisez et copiez le CSS
Exemples d’entrée et de sortie
FAQ
Sur quelle fonctionnalité CSS repose-t-il ?
Principalement sur backdrop-filter. Les navigateurs non pris en charge ont besoin d'un arrière-plan uni ou opaque de secours.
En quoi diffère-t-il des autres outils de glassmorphisme ?
Celui-ci se concentre sur la couleur, l'opacité, le flou et le contour de la carte. L'autre exporte des extraits givrés rapides avec des valeurs par défaut et des préfixes communs.
Outils
Outils associés
Poursuivez avec un autre outil traduit pour une tâche proche.
Neumorphisme CSS
Neumorphisme CSS — Générateur d'ombres de l'interface utilisateur logicielle
Générer du CSS d'ombre incrusté/départ neumorphique à partir de la couleur d'arrière-plan, de la distance et flou. Prévisualisez les looks surélevés et enfoncés pour les boutons, les cartes et les commandes lumineuses de l'interface utilisateur logicielle.
CSS Neumorphisme Ombre
Motif d'arrière-plan CSS
Motif d'arrière-plan CSS — Points, rayures et grilles
Générez des motifs d'arrière-plan CSS purs tels que des points, des rayures, des damiers et des grilles. Ajustez les couleurs et la taille, puis copiez le CSS pour les remplissages décoratifs, les espaces réservés et les expériences visuelles.
CSS Arrière-plan Motif