# Générateur de snippets CSS glassmorphism / neumorphisme Génère de bout en bout le snippet CSS glassmorphism ou neumorphisme complet : réglez flou, saturation, opacité de teinte, rayon, bordure, ombre extérieure et reflet supérieur ; en option superposition de grain SVG feTurbulence et repli @supports ; préfixe -webkit-backdrop-filter ajouté automatiquement (requis avant Safari 18) et correspondance des classes Tailwind (avec la note v3/v4), avec aperçu en direct de la carte sur fond dégradé. > Page canonique: https://elysiatools.com/fr/tools/glassmorphism-css-snippet-builder - **Catégorie:** Design - **Mots-clés:** glassmorphism, neumorphisme, backdrop-filter, verre dépoli, générateur css, carte de verre ## Présentation Constantes vérifiées (août 2026) : classiques css.glass (rgba(255,255,255,.2), blur(5px), rayon 16px, ombre 0 4px 30px) ; composition 2025 (blur(12px) saturate(160%), ombre 0 8px 32px rgba(0,0,0,.12) + inset supérieur). backdrop-filter : 95,69 % (caniuse) ; Safari exige -webkit- jusqu'à 17.x, sans préfixe depuis 18 ; Firefox depuis 103. Grain : feTurbulence fractalNoise en data-URI sur ::before (0,05–0,15) ; @supports retombe sur un rgba quasi opaque. Tailwind : backdrop-blur-xl=24px, backdrop-saturate-150, rounded-2xl=16px ; v4 a déplacé blur-sm de 4 à 8px — valeurs exactes via backdrop-blur-[12px]. Neumorphisme (neumorphism.io) : fond identique à la page, ombre sombre en bas-droite + claire en haut-gauche, inset = enfoncé, mode sombre avec claire à 0,03–0,1 ; les ombres ne comptent pas pour le contraste — pas pour les contrôles interactifs. ## Entrées - **Style** (select) - **Flou d'arrière-plan (px)** (number) - **Saturation d'arrière-plan (%)** (number) - **Couleur de teinte du verre** (color) - **Opacité de la teinte** (number) - **Rayon des coins (px)** (number) - **Épaisseur de bordure (px, verre)** (number) - **Opacité de bordure (verre)** (number) - **Opacité de l'ombre extérieure (verre)** (number) - **Reflet du bord supérieur (inset)** (checkbox) - **Superposition de grain** (checkbox) - **Repli @supports** (checkbox) - **Couleur de fond neu** (color) - **Distance d'ombre neu (px)** (number) - **État enfoncé (inset)** (checkbox) - **Mode sombre neu** (checkbox) ## Quand l'utiliser - Quand vous construisez une carte, un panneau ou un overlay en verre dépoli avec backdrop-filter. - Quand vous voulez un bloc Soft UI (neumorphisme) avec ombres claires/sombres, état enfoncé ou mode sombre. - Quand vous copiez un CSS prêt à coller, y compris grain, repli @supports et classes Tailwind. ## Fonctionnement - Choisissez le style glassmorphism ou neumorphisme, puis réglez flou (px), saturation (%), teinte, opacité, rayon, bordure et ombre. - Activez le reflet inset supérieur, la superposition de grain feTurbulence et le repli @supports selon le besoin. - Pour le neumorphisme, définissez la couleur de fond, la distance d’ombre, l’état enfoncé (inset) et le mode sombre. - Récupérez le CSS (avec -webkit-backdrop-filter) et le mapping Tailwind, tout en prévisualisant la carte en direct. ## Cas d'usage - Carte frosted glass 2025 : blur 12px, saturate 160 %, teinte blanche 0,15, rayon 16px, grain et @supports. - Panneau neumorphique clair ou sombre, avec ombres à distance réglable et état enfoncé. - Snippet CSS + classes Tailwind (valeurs nommées ou arbitraires, avertissement blur-sm v3/v4) pour coller dans un projet. ## Questions fréquentes ### Quelle est la différence entre glassmorphism et neumorphisme ? Le verre dépoli floute l’arrière-plan (backdrop-filter, teinte, bordure). Le neumorphisme reprend la couleur de page avec une ombre sombre en bas-droite et une claire en haut-gauche ; l’inset simule l’enfoncé. ### Pourquoi le préfixe -webkit-backdrop-filter ? Safari l’exige jusqu’à 17.x (sans préfixe depuis 18). Le snippet émet les deux déclarations. Firefox le gère sans préfixe depuis 103. ### Que fait la superposition de grain ? Elle ajoute un motif SVG feTurbulence (fractalNoise) en data-URI sur ::before, avec une opacité typique de 0,05 à 0,15. ### À quoi sert le repli @supports ? Si backdrop-filter n’est pas supporté, le CSS retombe sur une teinte rgba quasi opaque pour conserver un fond lisible. ### Les ombres neumorphiques suffisent-elles au contraste ? Non : elles ne comptent pas pour le contraste. Évitez ce style sur les contrôles interactifs principaux. ## Outils associés - [Extracteur de contour mélodique audio](https://elysiatools.com/fr/tools/audio-melody-contour-extractor): Extrait la mélodie dominante et réunit MIDI, événements de notes, contour de hauteur, SVG et JSON dans un ZIP. - [Inspecteur de fichiers de police (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/fr/tools/font-file-inspector): Téléversez une police TTF, OTF, WOFF ou WOFF2 (WOFF2 décompressée automatiquement) et inspectez toutes les métadonnées : famille/sous-famille/designer/copyright/version, nombre de glyphes, unitsPerEm, graisse et largeur, angle italique, drapeaux de style et boîte englobante ; carte thermique de couverture par blocs Unicode ; aperçu SVG des glyphes (texte personnalisable, échantillonnage auto pour les fontes d'icônes) ; ligatures liga et fonctionnalités OpenType ; axes fvar et instances nommées des fontes variables. - [Outil de Filigrane d'Angle](https://elysiatools.com/fr/tools/image-watermark-corner): Ajoutez des filigranes d'angle aux images avec positionnement, taille, opacité et options d'angles multiples personnalisables - [Outil de Filigrane Diagonal](https://elysiatools.com/fr/tools/image-watermark-diagonal): Ajoutez des filigranes diagonaux aux images avec angle, taille, opacité et positionnement le long de la diagonal personnalisables - [Outil de Filigrane d'Image](https://elysiatools.com/fr/tools/image-watermark-image): Ajoutez des filigranes d'image aux images avec position, taille, opacité et rotation personnalisables - [Outil d'Opacité de Filigrane](https://elysiatools.com/fr/tools/image-watermark-opacity): Ajoutez des filigranes avec opacité personnalisée aux images, supportant des filigranes de texte et d'image avec des contrôles avancés d'opacité - [Outil de Mosaique de Filigrane](https://elysiatools.com/fr/tools/image-watermark-tile): Ajoutez des filigranes en mosaïque aux images avec taille, opacité, espacement et motifs personnalisables - [Extracteur de donnees depuis graphiques SVG](https://elysiatools.com/fr/tools/svg-chart-to-data-extractor): Reconstitue des points de donnees a partir de structures SVG de ligne, barre ou camembert ## Exemples - [Exemples SVG](https://elysiatools.com/fr/samples/svg-samples): Exemples de graphiques vectoriels évolutifs (SVG) démontrant diverses fonctionnalités et techniques SVG - [Tailwind CSS Samples](https://elysiatools.com/fr/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations - [Exemples de Traitement d'Images Web Python](https://elysiatools.com/fr/samples/web-image-processing-python): Exemples de traitement d'images Web Python utilisant PIL/Pillow incluant la lecture, l'enregistrement, le redimensionnement et la conversion de format - [Exemples du Framework CSS Bulma](https://elysiatools.com/fr/samples/bulma): Exemples du framework CSS Bulma incluant les colonnes, composants, contrôles de formulaire, système de mise en page et modèles de conception modernes basés sur CSS ## Contenu associé - [Outils de Workflow pour SVG, Favicon et Icônes](https://elysiatools.com/fr/hubs/svg-favicon-icon-workflows): Generez des packs favicon, optimisez des SVG, convertissez des icones entre ICO, PNG, JPG, WebP et SVG, et preparez des assets web dans un seul hub. - [Outils d encodage et de conversion audio](https://elysiatools.com/fr/hubs/audio-convert): Comparez la conversion de formats audio, les changements de debit, la conversion de frequence d echantillonnage, les changements de codec et les exports dans un meme hub. - [Outils de conversion de formats d image et d export anime](https://elysiatools.com/fr/hubs/image-convert): Comparez les convertisseurs d image pour JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 et les exports orientes animation dans un meme hub. - [Outils d interchange JSON et de traduction de formats](https://elysiatools.com/fr/hubs/json-convert): Comparez les outils de conversion JSON pour CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN et d autres formats structures dans un meme hub.