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.

Elysia Tools

Navigation mobile

Design

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é.

Détails

Ce que cet outil vous aide à faire

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.

Exécution

Exécuter cet outil

Remplissez le formulaire, lancez l’outil et consultez le résultat au même endroit.

Exécutions d’exemple préparées

Cliquez sur un exemple pour remplir automatiquement le formulaire. Les fichiers doivent toujours être téléversés.

2 exemples

Carte verre dépoli de bonne pratique (blur 12 / saturate 160)

Composition 2025 : blur(12px) saturate(160%), teinte blanche 0,15, rayon 16px, bordure 0,25, ombre multicouche avec reflet supérieur, grain et repli @supports, plus le mapping Tailwind avec l'avertissement v4.

<section class="glz">live frosted card over gradient · CSS with -webkit- prefix, ::before grain, @supports fallback · Tailwind classes</section>

Contrôle neumorphique sombre à l'état enfoncé (inset)

Surface neumorphique en mode sombre (#2d2d2d) avec ombres inset pour l'état enfoncé, claire atténuée à 0,06 — la sortie Tailwind utilise des valeurs arbitraires d'ombre.

<section class="glz">neumorphism · dark #2d2d2d · inset 8px shadows · preview on flat dark panel · CSS + arbitrary-value Tailwind</section>

Entrées

Les options sont groupées pour rendre les longs formulaires plus lisibles.

16 réglages

RéglagesAjustez formats, plages, nombres et modes.11

StyleselectOptionnelFlou d'arrière-plan (px)numberOptionnelSaturation d'arrière-plan (%)numberOptionnelCouleur de teinte du verrecolorOptionnelOpacité de la teintenumberOptionnelRayon des coins (px)numberOptionnelÉpaisseur de bordure (px, verre)numberOptionnelOpacité de bordure (verre)numberOptionnelOpacité de l'ombre extérieure (verre)numberOptionnelCouleur de fond neucolorOptionnelDistance d'ombre neu (px)numberOptionnel

OptionsActivez ou désactivez les comportements optionnels.5

Reflet du bord supérieur (inset)checkboxOptionnelActivé si cochéSuperposition de graincheckboxOptionnelActivé si cochéRepli @supportscheckboxOptionnelActivé si cochéÉtat enfoncé (inset)checkboxOptionnelActivé si cochéMode sombre neucheckboxOptionnelActivé si coché

Résultat

Prêt à exécuter

Après exécution, les fichiers, textes, données structurées ou sorties en flux apparaîtront ici.

Exemples

Exemples adaptés à cet outil

Associé

Continuer avec des outils et dossiers associés

style: glass, blurPx: 12, saturatePct: 160, tintColor: #ffffff, tintAlpha: 0.15, radiusPx: 16, borderWidth: 1, borderAlpha: 0.25, shadowAlpha: 0.12, topHighlight: true, noiseOverlay: true, includeFallback: true

Générateur de snippets CSS glassmorphism / neumorphisme

Ce que cet outil vous aide à faire

Exécuter cet outil

Exécutions d’exemple préparées

Entrées

Résultat

Exemples adaptés à cet outil

Continuer avec des outils et dossiers associés

Exécutions d’exemple préparées

Entrées

Résultat

Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.

Points clés

Aperçu

Quand l’utiliser

Fonctionnement

Cas d’usage

Exemples

1. Carte verre dépoli (pratique 2025)

2. Contrôle neumorphique sombre enfoncé

FAQ

Exemples SVG

Tailwind CSS Samples

Exemples de Traitement d'Images Web Python

Exemples du Framework CSS Bulma

Extracteur de contour mélodique audio

Inspecteur de fichiers de police (TTF / OTF / WOFF / WOFF2)

Outil de Filigrane d'Angle

Outil de Filigrane Diagonal

Outils de Workflow pour SVG, Favicon et Icônes

Outils d encodage et de conversion audio

Outils de conversion de formats d image et d export anime

Outils d interchange JSON et de traduction de formats