Neumorphisme CSS

Générateur Neumorphisme CSS & Soft UI

Générez des ombres portées CSS en neumorphisme et soft UI avec surfaces extrudées, en creux, plates ou concaves. Copiez instantanément du code CSS, Tailwind, SCSS ou SVG.

Préréglages :
Espace de Visualisation 3D
Extrudé (relief bombé)Cliquer pour basculer
145°
#e0e5ec
Dimensions de l'élément240px
Rayon des coins (border-radius)32px
Distance d'élévation12px
Douceur du flou24px
Rayon d'étalement (spread)0px
Intensité15%
Angle d'incidence145°
145°
Studio d'orientation lumineuseFaites glisser la boussole pour orienter la lumière incidente
Harmonie chromatiqueHarmonisation chromatique adaptative des teintes d'ombre et de reflet
Variables CSSExporter sous forme de variables personnalisées :root
Biseau de contourAjoute un filet de contraste fin pour rehausser la délimitation de surface
Coordonnées vectorielles dx=10px, dy=7px | 145°Complexité du rendu
/* Neumorphic Soft UI Element */
.soft-ui-surface {
  width: 240px;
  height: 240px;
  border-radius: 32px;
  background: #e0e5ec;
  box-shadow: 10px 7px 24px #b5c3d5, -10px -7px 24px #e5e9ee;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease;
}
/* Interactive Elevate & Depress States */
.soft-ui-surface:hover {
  box-shadow: 13px 9px 30px #b5c3d5, -13px -9px 30px #e5e9ee;
  transform: translateY(-2px);
}
.soft-ui-surface:active {
  box-shadow: inset 10px 7px 24px #b5c3d5, inset -10px -7px 24px #e5e9ee;
  transform: translateY(0);
}
Format actif CSS Pur | 569 octetsPrêt pour la production
Contraste WCAG
1.41:1

À vérifier

Vecteur Spéculaire
145° / 12px

Projection trigonométrique d'angle et de décalage des ombres portée et spéculaire.

Rendu Moteur
24px (Physique optique auto)

Syntaxe CSS standard optimisée pour les performances de rendu GPU du navigateur.

Traitement Côté Client

Calculs haute performance exécutés intégralement dans la mémoire du navigateur.

Zéro Transfert Serveur

Toutes les données restent strictement locales, sans aucune transmission externe.

Export Prêt pour la Production

Formats de sortie propres et optimisés, immédiatement exploitables en production.

Référence technique et guide d'architecture

Générateur Neumorphisme CSS & Soft UI — Guide de référence

Créez des ombres portées Soft UI douces, extrudées et en creux grâce à notre générateur neumorphique CSS. Obtenez un code propre et ajustez les angles et contrastes en temps réel.

Générateur Neumorphisme CSS & Soft UI — Guide de référence — Architecture en mémoire côté client et flux de données
Générateur Neumorphisme CSS & Soft UI — Guide de référence — Architecture en mémoire côté client et flux de données

Paramètres clés et contrôles

couleur_surfacechaîne de couleur hex / hsl

Fond chromatique du conteneur aligné sur le canevas parent. Une luminance comprise entre 80 % et 94 % en mode clair (ex. #e0e5ec) ou entre 10 % et 20 % en mode sombre assure une distinction optique optimale des ombres sans écrêter les reflets spéculaires ni noyer les ombres ambiantes.

Par défaut : #e0e5ec
distance_ombreentier en pixels (2px - 50px)

Décalage spatial en pixels simulant l'élévation perçue sur l'axe Z par rapport au plan de référence. Selon les lois de l'optique physique, la projection réaliste d'une lumière naturelle diurne requiert un rayon de flou double par rapport à cette distance (ratio 2:1).

Par défaut : 12px
rayon_flouentier en pixels (4px - 100px)

Rayon de diffusion de la pénombre gaussienne. Un ratio inférieur à 1,5× la distance génère un biseau artificiel trop dur, tandis qu'un ratio dépassant 3,0× provoque un délavage excessif de l'ombre et la perte de définition tactile du contour.

Par défaut : 24px
angle_lumieredegré angulaire (0deg - 360deg)

Vecteur polaire de la lumière incidente. Les recommandations ergonomiques d'interface établissent une référence entre 135deg et 145deg (éclairage en haut à gauche), correspondant au sens naturel de lecture et aux attentes visuelles d'un éclairage zénithal.

Par défaut : 145deg
intensite_ombrepourcentage (5 % - 40 %)

Multiplicateur du canal alpha modulant l'obscurité des ombres et la luminescence des reflets clairs. Des valeurs élevées (> 30 %) accentuent la profondeur mais induisent une fatigue visuelle et provoquent des bandes de quantification (banding) sRGB 8 bits sur les écrans non calibrés.

Par défaut : 15%
forme_surfaceénumération de profil d'élévation (flat | concave | convex | pressed)

Topologie géométrique de la surface : Plat (double box-shadow classique), Concave (dégradé linéaire orienté selon l'axe lumineux), Convexe (dégradé linéaire sphérique bombé) ou Enfoncé/Inset (double ombre interne pour boutons pressés et champs de saisie).

Par défaut : flat

Conseils de pro et bonnes pratiques

Harmonisation chromatique des ombres contre l'effet de gris sale

L'application d'ombres noir pur rgba(0, 0, 0, alpha) sur des fonds pastel colorés engendre un artefact optique grisâtre terne et peu esthétique. Le design Soft UI professionnel applique une teinte chromatique aux ombres en décalant la teinte de l'ombre sombre vers celle de la surface hôte, tout en abaissant la luminosité de 15 à 20 % et en augmentant la saturation de 5 à 10 % dans l'espace colorimétrique LCH ou HSL.

Le ratio d'or optique 2:1 entre flou et distance

En optique physique skeuomorphique, une source lumineuse ponctuelle génère une ombre propre et une pénombre dont la douceur varie linéairement avec l'élévation. Définir un flou égal à deux fois la distance (blur = 2 * distance) avec un étalement nul (spread = 0) produit le rendu Soft UI le plus organique et naturel. L'utilisation d'une valeur d'étalement non nulle crée souvent des bordures artificielles dures qui brisent l'illusion d'extrusion de la surface.

Résoudre le piège d'accessibilité WCAG AA sur le contraste non textuel

Par conception, les boutons neumorphiques échouent au critère de succès WCAG 2.1 1.4.11 (ratio de contraste minimal de 3:1 pour les composants d'interface utilisateur), car la couleur de surface est identique au fond du canevas. Pour réussir les audits d'accessibilité (RGAA / WCAG) sans sacrifier l'esthétique, ajoutez une bordure fine semi-transparente de 1px (rgba(var(--text-color), 0.15)) ou associez l'ombre douce à une icône ou un libellé textuel contrasté dépassant un ratio de 4,5:1.

Pièges courants et dépannage

⚠️Apparition de bandes de dégradé (color banding) et de cercles crénelés sur écrans OLED ou dalles 8 bits

Les dégradés subtils et les flous étendus provoquent des marches d'escalier de quantification sur les dalles 8 bits. Corrigez ce phénomène en superposant un pseudo-élément CSS doté d'un filtre SVG de bruit monochromatique à 1 % (feTurbulence avec opacité 0.03), ou en plafonnant le rayon de flou sous 40px tout en réduisant légèrement la distance d'ombre.

⚠️L'ombre interne CSS (inset box-shadow) déborde du texte ou rogne le border-radius sous Safari WebKit

Le moteur WebKit laisse parfois déborder les ombres internes au-delà des coins arrondis lors des transformations avec accélération matérielle. Assurez-vous que le conteneur applique overflow: hidden, un border-radius explicite et un contexte d'empilement isolé (transform: translateZ(0) ou will-change: transform).

⚠️Scintillement des états de survol (:hover) ou surcharge processeur (CPU reflow) lors des transitions

L'application d'une transition directe sur plusieurs propriétés box-shadow impose des cycles de redessin (repainting) très coûteux au CPU à chaque trame. Plutôt que d'animer box-shadow, effectuez un fondu enchaîné d'opacité entre deux pseudo-éléments positionnés en absolu (::before et ::after) configurés avec will-change: opacity, garantissant ainsi une composition GPU fluide à 60 i/s.

Foire aux questions (FAQ)

Comment calculer mathématiquement les ombres d'un bouton neumorphique en CSS ?▼

Les ombres neumorphiques reposent sur deux déclarations box-shadow complémentaires déduites des coordonnées polaires de la lumière (thêta) et de la distance (d) : décalage-x = d * cos(thêta), décalage-y = d * sin(thêta). Le reflet spéculaire opposé applique (-décalage-x, -décalage-y) avec une couleur éclaircie de 10 à 20 % par rapport au fond, tandis que l'ombre ambiante applique (+décalage-x, +décalage-y) assombrie de 10 à 25 %, le tout associé à un flou gaussien de pénombre calibré à exactement 2 * d.

Quelle est la couleur d'arrière-plan idéale pour une interface neumorphique ?▼

Les blancs cassés intermédiaires et les gris ardoise doux présentant une luminance comprise entre 88 % et 94 % (en particulier les codes hexadécimaux #e0e5ec, #ebecf0 ou HSL 215, 20 %, 91 %) offrent la plage dynamique idéale. Le blanc pur (#ffffff) ne convient pas car les reflets spéculaires sont écrêtés sans contraste perceptible, tandis que le noir pur (#000000) noie complètement les ombres portées sombres.

Quelle est la différence entre neumorphisme, glassmorphisme et skeuomorphisme ?▼

Le neumorphisme simule l'extrusion d'éléments monochromes moulés dans le même matériau que leur arrière-plan grâce à deux ombres douces opposées. Le glassmorphisme mise sur des panneaux translucides multicouches avec flou d'arrière-plan (backdrop-filter: blur()). Enfin, le skeuomorphisme imite fidèlement des textures physiques du monde réel (cuir, aluminium brossé, biseaux mécaniques) via des dégradés complexes et un éclairage tridimensionnel poussé.

Pourquoi le neumorphisme échoue-t-il souvent aux audits d'accessibilité WCAG 2.1 AA ?▼

Les composants neumorphiques échouent au critère de succès 1.4.11 des WCAG 2.1 (qui impose un contraste d'au moins 3:1 pour les éléments d'interface interactifs) parce que la surface du bouton partage exactement la même teinte hexadécimale que son arrière-plan (ratio 1:1). Pour respecter les normes réglementaires (RGAA / WCAG) tout en préservant le style Soft UI, les développeurs intègrent un filet de délimitation semi-transparent de 1px (rgba(0, 0, 0, 0.15)) ou s'assurent que la typographie et les icônes atteignent un ratio supérieur à 4,5:1 selon le critère 1.4.3.

Outils et utilitaires connexes

Tous les outils →
Générateur de Palette & HarmoniesDesign

Générez instantanément des harmonies de couleurs équilibrées. Créez des palettes complémentaires, analogues ou triadiques avec audit de contraste WCAG et export CSS.

Ouvrir l'outil→
Générateur Glassmorphism & Verre DépoliDesign

Générez du code CSS moderne de glassmorphism et verre dépoli avec réglages en direct du flou backdrop-filter, opacité, bordure et ombres. Copiez instantanément du code HTML et CSS propre.

Ouvrir l'outil→
Compresseur d'Image & Réducteur PhotoDesign

Compressez vos images en ligne sans perte de qualité. Réduisez la taille des fichiers JPG, PNG et WebP dans le navigateur sans téléversement, avec solveur de Ko cible et export ZIP groupé.

Ouvrir l'outil→
Générateur Interactif de Dégradés CSS Linéaires et RadiauxDesign

Tous les calculs et conversions sont exécutés exclusivement dans la mémoire de votre navigateur sans aucun transfert.

Ouvrir l'outil→
Générateur d'Ombres CSS Multicouches (Box Shadow)Design

Concevez des ombres portées CSS multicouches réalistes avec élévation optique, biseau intérieur, diffusion de flou et export Tailwind, CSS et React.

Ouvrir l'outil→
Générateur de CSS Clip-Path Polygones & Masques VectorielsDesign

Créez des masques de découpe géométriques réactifs et des balises SVG avec manipulation visuelle des sommets et CSS instantané.

Ouvrir l'outil→