Neu Input
Des champs de saisie de 46 px creusés dans la matière par deux ombres internes, dont une recherche avec loupe incrustée ; au focus, un liseré violet de 3 px s'ajoute au creux. Pur CSS, libellé relié à son champ.
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 creux tient dans une seule règle. .neu-input (largeur 100 %, 46 px de haut, border-radius: 12px, sans bordure ni contour) a le fond de la matière #e0e5ec et deux ombres internes : #b8bec7 3px 3px 6px inset en haut à gauche, #fff -3px -3px 6px inset en bas à droite. La lumière semble venir d'en haut à gauche et le champ se lit comme une cavité. Le texte tapé est en #374151 (14 px, police Inter si elle est chargée), le texte d'aide en #9ca3af. Au focus, une troisième ombre s'ajoute aux deux premières : rgba(139, 92, 246, .2) 0 0 0 3px, un liseré violet pâle autour du creux, en transition de 0,3 s.
La recherche place une loupe SVG de 18 px (trait #9ca3af) en position: absolute à 14 px du bord gauche, centrée par top: 50% et translateY(-50%) ; le champ décale son texte de 40 px pour lui laisser la place. L'ensemble .neu-input-scene fait 280 px de contenu, en colonne avec 16 px d'écart.
Deux choix rendent les champs utilisables sans souris ni écran. Le libellé enveloppe son champ (<label class="neu-input-group">, texte dans un span) : le lien est implicite, un clic sur « Nom complet » donne le focus au champ et input.labels.length vaut 1 ; un <label> posé à côté, sans for, ne serait relié à rien. La recherche, qui n'a pas de libellé visible, porte aria-label="Rechercher", et sa loupe aria-hidden. Et, comme toute la famille, .neu-input-scene déclare sa surface (background: #e0e5ec, padding: 28px, border-radius: 24px, box-sizing: content-box) : sur un fond noir, les creux gris clair se liraient comme des pavés plats.
Accessibilité
- Focus presque invisible : le code supprime le contour du navigateur (
outline: 0) et le remplace par un liserérgba(139, 92, 246, .2)qui, posé sur#e0e5ec, ne contraste qu'à 1,2:1 avec la matière. Un utilisateur au clavier voit mal quel champ est actif. Remplacez-le par un liseré plein :.neu-input:focus-visible { box-shadow: #b8bec7 3px 3px 6px inset, #fff -3px -3px 6px inset, #8b5cf6 0 0 0 2px }(3,3:1) — le creux reste, le liseré devient lisible. - Contraste : le texte tapé
#374151mesure 8,1:1, mais le libellé#6b7280(12,5 px, 600) 3,8:1 et le texte d'aide#9ca3af2,0:1, sous le seuil de 4,5:1. Passez le libellé en#374151(comme dans les scènes) et ne mettez dans le texte d'aide rien d'indispensable : il disparaît dès la première lettre. - Limites du champ : la cavité n'existe que par l'ombre
#b8bec7(1,5:1), sous les 3:1 demandés aux limites d'un champ (WCAG 1.4.11). Pour un formulaire important (paiement, administration), ajoutez une bordure1px solid #9ca3af. - Noms : vérifié dans Chromium et Firefox, le premier champ s'appelle « Nom complet » (libellé englobant, un clic sur le texte donne le focus) et la recherche « Rechercher ». Si vous ajoutez des champs sans libellé visible, donnez-leur un
aria-label: le texte d'aide ne remplace pas un nom.
Compatibilité navigateur
CSS seul : box-shadow internes multiples, ::placeholder, :focus, transition, SVG positionné en absolu, flexbox avec gap. Zéro JavaScript, zéro dépendance. Rendu identique mesuré dans Chromium, Firefox et WebKit (Playwright). Le gap des conteneurs flex demande Chrome 84, Firefox 63, Safari 14.1.
Sans box-shadow, les champs deviennent des rectangles gris arrondis sans bordure, toujours utilisables mais difficiles à repérer. Sur iPhone, une police de moins de 16 px fait zoomer la page au focus : passez .neu-input à 1rem pour un formulaire mobile.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="neu-input-scene">
<label class="neu-input-group">
<span class="neu-input-label">Nom complet</span>
<input type="text" class="neu-input" placeholder="…">
</label>
<div class="neu-search-wrap">
<svg viewBox="0 0 24 24" aria-hidden="true">…</svg>
<input type="text" class="neu-input" placeholder="Rechercher..." aria-label="Rechercher">
</div>
</div>Le code complet HTML + CSS + JS de Neu Input, 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 |
|---|---|---|
Profondeur du creux (CSS — 3px 3px 6px inset) |
3 px de décalage, 6 px de flou | 5px 5px 10px pour un champ plus profond (zone de saisie principale), 2px 2px 4px pour des champs denses. Changez les deux ombres ensemble, et celles de :focus aussi. |
Liseré de focus (CSS — rgba(139, 92, 246, .2) 0 0 0 3px) |
violet à 20 %, 3 px | Contraste mesuré 1,2:1 : passez à #8b5cf6 0 0 0 2px (3,3:1) ou #6d28d9 (5,6:1) pour un focus lisible au clavier. |
Hauteur et rayon (CSS — height: 46px; border-radius: 12px) |
46 × 12 px | Champ de recherche en pilule : border-radius: 23px. Ne descendez pas sous 40 px de haut sur écran tactile. |
Taille du texte (CSS — font-size: .88rem) |
14 px | Passez à 1rem (16 px) pour éviter le zoom automatique d'iOS au focus. |
Teinte de la matière (CSS — #e0e5ec, ombres #b8bec7 / #fff) |
gris bleuté clair | Le champ et la surface .neu-input-scene partagent la même teinte : changez-les ensemble, avec une paire d'ombres de la même famille. |
FAQ
.neu-input:focus par #8b5cf6 0 0 0 2px : le rendu reste neumorphique et le focus devient lisible.<label class="neu-input-group"><span class="neu-input-label">E-mail</span><input class="neu-input" type="email"></label>. Le libellé englobant relie le texte au champ sans identifiant, donc sans risque de doublon si le formulaire apparaît deux fois.
