Générateur Neumorphisme Soft UI
Créez des effets CSS neumorphisme soft UI avec des doubles ombres et 4 types de forme.
① Choisissez couleur et forme ② Ajustez distance et flou ③ Copiez le CSS
Soft UI
Presets de couleur:
light#ffffff
dark#b0bdcf
150px
16px
10px
20px
15%
Code CSS
.neumorphic {
background: #e0e5ec;
border-radius: 16px;
box-shadow: 10px 10px 20px #b0bdcf, -10px -10px 20px #ffffff;
/* light: #ffffff | dark: #b0bdcf */
}Qu'est-ce que le Neumorphisme ?
Le neumorphisme (Soft UI) est une tendance UI qui crée des surfaces plastiques extrudées en combinant design plat et skeuomorphisme. Il utilise deux box-shadows duales — une claire (highlight) et une sombre (shadow) — avec des décalages opposés. CSS : box-shadow: 10px 10px 20px #darkColor, -10px -10px 20px #lightColor. Pour la variante pressée, utilisez le mot-clé inset. Les couleurs d'ombre sont dérivées en ajustant la luminosité HSL de ±15–25%.
Questions Fréquentes
Le neumorphisme combine le design plat et le skeuomorphisme. Les éléments semblent extrudés du fond grâce à des doubles box-shadows.
Deux box-shadows avec décalages opposés. Exemple : box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff.
Plat : ombres à l'extérieur. Concave : dégradé radial creusé. Convexe : surélevé. Pressé : ombres internes avec inset.
Les tons moyens. Des couleurs autour de #e0e5ec ou #2d3436 sont des points de départ populaires.
Il a des problèmes d'accessibilité : faible contraste. L'exigence WCAG 2.1 est souvent non respectée.
Pour les widgets, les cartes, les contrôles de lecteur musical.
Calculez la luminosité HSL, créez une version plus claire (+15-25%) et plus sombre (-15-25%). Cet outil calcule automatiquement.