Neu Dashboard
Un panneau neumorphique complet de 320 × 215 px sur une seule teinte : en-tête avec badge en creux, trois compteurs en relief qui s'enfoncent au survol (0,2 s) et un histogramme de sept barres violettes dans une cuve creusée. 100 % CSS, les hauteurs des barres se règlent dans le HTML.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le panneau .neu-dash (320 px, padding: 20px, rayon 20 px) est peint en #e0e5ec avec deux ombres : #b8bec7 8px 8px 16px en bas à droite et #fff -8px -8px 16px en haut à gauche. Il empile quatre niveaux de profondeur, tous sur la même teinte. En relief : les trois compteurs .neu-dash-stat (86,7 × 65 px, rayon 14 px, ombres de 4 px). En creux : le badge .neu-dash-badge (ombres inset de 2 px, texte vert #10b981 en 11,2 px) et la cuve de l'histogramme .neu-dash-chart (280 × 60 px, inset de 3 px, 8 px de marge intérieure). En couleur : les sept barres .neu-dash-bar, en flex à parts égales (32,6 px, 6 px d'écart), arrondies en haut (4 px), dégradé vertical #8b5cf6 → #a78bfa à 70 % d'opacité. La hauteur de chaque barre est un pourcentage en ligne (style="height: 40%") de la hauteur utile de la cuve, 44 px : mesuré, 40 % donne 17,6 px.
Deux réactions au survol, sans JavaScript, mesurées dans Chromium 151, Firefox 153 et WebKit 26.5. Un compteur survolé échange ses ombres extérieures pour des ombres intérieures de 3 px (transition: .2s) : il s'enfonce sous le pointeur, comme une touche. Une barre survolée passe de 70 à 100 % d'opacité. Les valeurs sont en 17,6 px graisse 800 #374151, les libellés en 10,4 px #9ca3af, le titre h4 en 13,6 px graisse 700. Tout le contenu est du texte dans le HTML : pour brancher des données réelles, on remplace les valeurs et les height des barres côté serveur ou en JavaScript.
Le panneau arrive avec sa matière : le cadre .demo-preview déclare la même surface #e0e5ec que lui et 32 px de marge verticale, sans rien imposer à body. Sans cette surface, sur un fond noir, l'ombre claire #fff deviendrait un halo blanc tout autour (19,8:1 avec le fond, contre 1,3:1 avec sa propre surface). Avec elle, le relief se lit comme prévu, et le panneau reste lisible collé dans une page blanche. Si vous retirez ce cadre, donnez la même teinte à la section qui contient le panneau.
Accessibilité
- Contraste : les valeurs et le titre
#374151mesurent 8,1:1 sur#e0e5ec. Les libellés#9ca3afen 10,4 px ne font que 2,0:1, le badge vert#10b9812,0:1 aussi : sous le seuil de 4,5:1, ils se lisent mal en plein jour. Passez les libellés en#4b5563(6,0:1) et le badge en#065f46(6,1:1), comme dans la scène du rameur. Les barres ressortent à 2,3:1 en bas et 1,7:1 en haut (70 % d'opacité), sous les 3:1 demandés pour un graphique : mettezopacity: 1si l'histogramme porte une information. - Histogramme : sept
divvides, sans texte ni valeur — un lecteur d'écran ne lit rien. Donnez à.neu-dash-chartunrole="img"et unaria-labelqui résume la tendance (« Énergie consommée par jour, de lundi à dimanche, en hausse le week-end »), ou ajoutez les valeurs dans un tableau masqué visuellement. - Survol seul : l'enfoncement des compteurs ne se déclenche qu'à la souris ; les compteurs ne sont ni des liens ni des boutons. C'est cohérent pour un panneau de lecture. S'ils doivent ouvrir un détail, faites-en des
<button>et ajoutez:focus-visibleà la règle:hoverpour que le clavier voie le même creux. - Relief et couleur : le relief neumorphique est peu contrasté par nature (ombre sombre 1,5:1 sur la surface) ; aucune information ne doit reposer sur lui seul. Ici chaque compteur a un libellé texte, et le badge porte son signe (+ ou −) en plus de la couleur verte. Aucun mouvement continu :
prefers-reduced-motionn'a rien à couper.
Compatibilité navigateur
CSS seul : box-shadow doubles et inset, grille CSS, flexbox, linear-gradient, opacity, transition. Zéro JavaScript, zéro dépendance. Mesuré collé dans une page vierge dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : mêmes ombres au repos, même passage en creux au survol (inset 3px 3px 6px). Le titre demande Inter ; sans elle, la police sans empattement par défaut prend le relais.
Les versions minimales sont celles de la grille CSS, qui range les trois compteurs. Sans elle (navigateurs de 2016 et avant), les compteurs s'empilent en colonne mais restent lisibles. Sur écran tactile, il n'y a pas de survol : le panneau reste dans son état de repos, complet.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="neu-dash-scene">
<div class="neu-dash">
<div class="neu-dash-header">
<h4>…</h4>
<span class="neu-dash-badge">…</span>
</div>
<div class="neu-dash-stats">
<div class="neu-dash-stat">
<span class="neu-dash-stat-value">…</span>
<span class="neu-dash-stat-label">…</span>
</div>
…
</div>
<div class="neu-dash-chart">
<div class="neu-dash-bar" style="height: 40%"></div>
…
</div>
</div>
</div>
</div>Le code complet HTML + CSS + JS de Neu Dashboard, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Teinte de la surface (CSS — background: #e0e5ec sur .neu-dash, le badge, les compteurs, la cuve et .demo-preview) |
#e0e5ec | Changez-la partout à la fois et recalculez les deux ombres (environ 15 % plus sombre, et blanc). Un fond d'une autre teinte que le panneau fait apparaître un halo autour de l'ombre claire. |
Hauteur des barres (HTML — style="height: 40%" sur chaque .neu-dash-bar) |
40, 65, 45, 80, 55, 90, 70 % | Pourcentage de la hauteur utile de la cuve (44 px). Calculez-le à partir de vos données (valeur ÷ maximum × 100). 0 % masque la barre (jour sans donnée). |
Nombre de barres (HTML — .neu-dash-bar) |
7 | Les barres se partagent la largeur (flex: 1) : 12 barres pour un an font 16,5 px chacune ; 30 barres pour un mois tombent à 3 px — réduisez alors gap à 2 px (6,9 px par barre). |
Survol des compteurs (CSS — .neu-dash-stat:hover { box-shadow: … inset }) |
passage en creux de 3 px en 0,2 s | Supprimez la règle si les compteurs ne mènent nulle part ; ajoutez :focus-visible s'ils deviennent des boutons. |
Couleurs des barres et du badge (CSS — .neu-dash-bar { background }, .neu-dash-badge { color }) |
#8b5cf6 → #a78bfa à 70 % · badge #10b981 | Une seule couleur d'accent garde le panneau calme. Pour une variation négative, passez le badge en rouge foncé (#b91c1c, 5,1:1) et gardez le signe −. |
Largeur du panneau (CSS — .neu-dash { width: 320px }) |
320 px (compteurs de 86,7 px) | Les compteurs font un tiers de la largeur moins les écarts : un libellé long comme « Rendement (COP) » passe déjà sur deux lignes à 320 px. Au-delà de 400 px, les compteurs deviennent larges et plats — passez alors à 4 colonnes. |
FAQ
bar.style.height = (valeur / max * 100) + '%' pour chaque barre, textContent pour les valeurs. Aucune bibliothèque de graphiques n'est nécessaire pour sept barres..neu-dash-bar reçoit sa hauteur en pourcentage du creux, en ligne (style="height: 40%") ; la largeur se partage toute seule (flex: 1), donc 5 ou 12 barres tiennent sans autre réglage. Calculez la hauteur à partir de la plus grande valeur : barres.forEach((b, i) => b.style.height = valeurs[i] / max * 100 + '%'). Pour que les barres montent au lieu de sauter, ajoutez height .4s ease à leur transition (le code n'anime que l'opacité). Mettez à jour les trois compteurs (.neu-dash-stat-value) et le badge dans le même temps, et l'aria-label du graphique si vous suivez le conseil d'accessibilité ci-dessus.
