Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium
Glassmorphism✨ Premium

Glass Input

Deux champs de saisie translucides de 240 px — e-mail et message — posés sur deux orbes floues : fond blanc à 6 %, flou d'arrière-plan de 16 px, et au focus une bordure violette, un fond qui s'éclaircit à 8 % et un anneau de 3 px, en 0,3 s, sans une ligne de JavaScript.

CSSFormFocus

Mis à jour le

Glass Input — aperçu ▶ Aperçu en direct avec un compte gratuit

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 →

Voir dans le catalogue

3 exemples d'usage

Demande de devis sur la photo d'une toiture — site d'un couvreur — Glass Input exemple 1

① Demande de devis sur la photo d'une toiture — site d'un couvreur

QuandPage « Devis gratuit » d'un couvreur : le particulier décrit sa fuite pendant que la photo d'un toit en ardoise fraîchement posé occupe tout l'écran.
PourquoiLa photo du savoir-faire reste visible pendant qu'on écrit : les rangs d'ardoise passent flous sous les champs, nets autour. Sur un fond aussi chargé, c'est l'anneau de focus qui dit où l'on tape — d'où un anneau renforcé à 60 %. Et la zone « Décrivez la fuite » montre enfin son texte d'aide : vide, elle affiche l'exemple attendu au lieu d'une case muette.
RéglagesTrois champs sur 260 px de large (e-mail, commune, zone de message), posés directement sur la photo, sans panneau ; libellés à 88 % de blanc avec une ombre portée pour tenir sur le ciel et l'ardoise, texte à 13 px ; au focus, anneau rgba(167,139,250,.6) et bordure à 85 %. Les orbes du code vendu sont retirées : c'est la toiture qui donne au verre quelque chose à flouter.
Message au propriétaire sur la photo du gîte — page de réservation d'un gîte rural — Glass Input exemple 2

② Message au propriétaire sur la photo du gîte — page de réservation d'un gîte rural

QuandAvant de réserver une longère dans l'Orne, le voyageur pose une question à la propriétaire : animaux acceptés, arrivée tardive.
PourquoiLe formulaire flotte sur la photo de la maison au lieu d'ouvrir une page blanche : on écrit en gardant le lieu sous les yeux. Le verre adoucit le toit et les volets sous les champs sans les cacher ; la lueur violette suffit à guider la saisie sans cadre opaque. Le texte d'aide de la zone de message propose les deux questions qu'on pose le plus souvent.
RéglagesDeux champs de 236 px à droite de l'image (e-mail vide avec son texte d'aide, question sur 64 px de haut) ; titre et mention « répond en général dans la journée » en blanc ombré. Le focus passe du champ e-mail à la zone de message au clic : l'anneau suit.
Liste d'attente d'un concert complet — billetterie d'une salle de musiques actuelles — Glass Input exemple 3

③ Liste d'attente d'un concert complet — billetterie d'une salle de musiques actuelles

QuandLe concert du samedi affiche complet : sur la page de l'événement, l'affiche animée reste en fond et deux champs inscrivent sur la liste d'attente.
PourquoiL'affiche continue de vendre le concert derrière le formulaire — le soleil, les rayons qui tournent, la bande qui défile restent visibles à travers les champs, adoucis. Un pavé blanc couperait la page en deux au moment où le visiteur est déçu ; deux champs de verre le gardent dans l'ambiance et lui demandent juste son e-mail et le nombre de places.
RéglagesChamp e-mail de 240 px et champ « places voulues » ramené à 120 px (input type="number", 1 à 4) ; affiche en CSS animé (rayons en repeating-conic-gradient qui tournent en 26 s, bande rayée qui glisse), tampon « Complet » ; mêmes réglages d'anneau que les autres scènes.

Comment ça marche

Tout est en CSS. Chaque champ (.glass-input-field, sur un input comme sur un textarea) est une vitre : fond rgba(255,255,255,.06), backdrop-filter: blur(16px) (et sa forme -webkit- pour Safari), bordure blanche à 10 %, coins de 10 px, padding: 10px 14px, texte blanc de 12,8 px (.8rem). Mesuré dans une page vierge : 240 × 37 px pour la ligne dans Chromium 151 (35 px dans Firefox 153, qui calcule autrement la hauteur de ligne), 240 × 60 px pour la zone de message (min-height: 60px, resize: none). Au-dessus de chaque champ, un libellé de 10,9 px en blanc à 50 %. Derrière, la scène de 300 × 220 px pose deux orbes déjà floues (filter: blur(50px)) : violette #7c3aed de 140 px en haut à droite, cyan #0891b2 de 100 px en bas à gauche, toutes deux à 40 % d'opacité — c'est elles que le verre adoucit.

Le focus fait tout le travail visible. .glass-input-field:focus change trois choses à la fois, avec transition: .3s : la bordure passe au violet rgba(139,92,246,.5), le fond monte de 6 à 8 % de blanc, et deux ombres apparaissent — un anneau plein de 3 px violet à 15 % et une lueur de 16 px vers le bas. Mesuré au clavier dans Chromium, Firefox et WebKit : Tab donne le focus au champ e-mail, l'anneau et la bordure sont en place 0,45 s plus tard, Tab suivant passe à la zone de message. Le contour natif est retiré (outline: 0) : c'est l'anneau qui le remplace.

Trois détails du HTML et du CSS comptent plus qu'ils n'en ont l'air. La zone de message s'ouvre et se ferme sur la même ligne, <textarea …></textarea> : la moindre indentation entre les balises deviendrait sa valeur (six espaces mesurés dans value lors d'un essai), et le texte d'aide « Votre message... » ne s'afficherait jamais ; ici :placeholder-shown est vrai pour les deux champs. Les libellés portent for, et les champs les identifiants glass-input-email et glass-input-message : un clic sur « Message » place le curseur dans la zone, et un lecteur d'écran annonce le libellé. Enfin le flou est écrit aussi en -webkit-backdrop-filter, la seule forme que lit Safari avant la version 18.

Accessibilité

  • Anneau de focus trop pâle : l'anneau livré (violet à 15 %) ressort à 1,14:1 sur le fond #0a0a0f et la bordure violette à 1,92:1 sur le champ — sous le seuil de 3:1 attendu d'un indicateur de focus (WCAG 1.4.11). Le contour natif étant retiré, montez l'anneau : box-shadow: 0 0 0 3px rgba(167,139,250,.6) donne 3,24:1, et une bordure rgba(167,139,250,.85) 4,34:1 sur le champ éclairci — c'est le réglage des trois scènes de cette page.
  • Texte d'aide : le placeholder en blanc à 30 % mesure 2,71:1 sur le champ (seuil 4,5:1). Il ne remplace pas un libellé — les deux libellés sont là et reliés — mais si l'aide porte une information utile (« Ex. : tache au plafond… »), passez-le à 55 % de blanc. Le libellé à 50 % mesure 5,33:1 sur #0a0a0f ; sur une photo claire, vérifiez-le ou donnez-lui une ombre portée.
  • Libellés et identifiants : label for + id relient chaque libellé à son champ (mesuré : label.control renvoie le champ). Si vous collez deux formulaires dans la même page, renommez les identifiants du second, sinon le second libellé enverra le curseur dans le premier champ. Ajoutez autocomplete="email" sur le champ e-mail et required là où la saisie est obligatoire.
  • Mouvement : la seule animation est la transition de 0,3 s au focus ; rien ne bouge seul, les orbes sont fixes. Aucun réglage prefers-reduced-motion n'est nécessaire.
  • Transparence réduite : rien n'est prévu pour prefers-reduced-transparency. Sur une photo très chargée, les utilisateurs qui l'activent gagneraient à un fond plein : @media (prefers-reduced-transparency: reduce) { .glass-input-field { background: #1f2430; backdrop-filter: none } }.

Compatibilité navigateur

CSS seul : backdrop-filter, ::placeholder, :focus, box-shadow, filter: blur() sur les orbes. Zéro JavaScript, zéro dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : même valeur calculée (blur(16px)), même anneau au focus, aucune erreur ; le flou peint n'a été vu que dans Chromium, les captures automatisées de Firefox et WebKit ne peignant pas backdrop-filter. Seule différence visible, la hauteur de la ligne : 37 px dans Chromium, 35 px dans Firefox. Safari a besoin du préfixe -webkit-backdrop-filter jusqu'à la version 17 : il est dans le CSS vendu.

Chrome 76+✓ Complet
Firefox 103+✓ Complet
Safari 9+✓ Complet (préfixe -webkit- avant la version 18, présent dans le code)
Edge 79+✓ Complet
Mobile iOS 9+✓ Complet
Android Chrome 76+✓ Complet

Sans backdrop-filter (Firefox avant 103, Chrome avant 76), le champ reste lisible : un fond blanc à 6 % sans flou, la bordure, le texte et l'anneau de focus restent en place — on voit simplement les orbes nettes derrière. Sur un fond très contrasté, ajoutez un fond de secours plus opaque dans @supports not (backdrop-filter: blur(1px)).

Le code

Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :

index.html — structure 
<div class="demo-preview">
  <div class="glass-input-scene">
    <div class="glass-input-orb glass-input-orb--1"></div>
    <div class="glass-input-orb glass-input-orb--2"></div>
    <div class="glass-input-group">
      <label class="glass-input-label" for="glass-input-email">…</label>
      <input type="email" id="glass-input-email" class="glass-input-field" placeholder="…">
    </div>
    <div class="glass-input-group">
      <label class="glass-input-label" for="glass-input-message">…</label>
      <textarea id="glass-input-message" class="glass-input-field glass-input-field--textarea" placeholder="…"></textarea>
    </div>
  </div>
</div>
Débloquer le code complet — 9,90 € TTC/mois

Le code complet HTML + CSS + JS de Glass 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éfautEffet
Opacité du verre (CSS — .glass-input-field { background: rgba(255,255,255,.06) }) 6 % au repos, 8 % au focus Sur une photo claire ou chargée, montez à 10-14 % pour que le texte saisi garde son contraste ; sur fond sombre et uni, 4 % suffit. Gardez l'écart entre repos et focus : c'est lui qui fait « s'allumer » le champ.
Force du flou (CSS — backdrop-filter: blur(16px) et -webkit-backdrop-filter) 16 px 8 px laisse deviner les formes derrière (les ardoises restent reconnaissables), 24 px les fond en couleurs. Changez les deux propriétés ensemble, sinon Safari ancien garde l'ancienne valeur.
Anneau et lueur de focus (CSS — .glass-input-field:focus { box-shadow: … }) anneau 3 px violet à 15 % + lueur 0 4px 16px à 10 %, bordure violette à 50 % Pour un focus lisible sur une photo : box-shadow: 0 0 0 3px rgba(167,139,250,.6), 0 4px 16px rgba(139,92,246,.25) et border-color: rgba(167,139,250,.85) (3,24:1 et 4,34:1 mesurés). Pour une autre couleur de marque, changez les trois teintes violettes ensemble.
Texte d'aide (CSS — .glass-input-field::placeholder { color: rgba(255,255,255,.3) }) blanc à 30 % (2,71:1) Passez à 55 % si l'aide porte une information. Le texte d'aide d'une zone de message ne s'affiche que si rien n'est écrit entre <textarea> et </textarea>, pas même un retour à la ligne : gardez les deux balises collées.
Taille des champs (CSS — .glass-input-group { width: 240px }, .glass-input-field--textarea { min-height: 60px }) 240 px de large, zone de message de 60 px Les champs prennent 100 % de leur groupe : changez la largeur du groupe (ou width: 100% dans un formulaire fluide). Pour une zone de message plus haute, montez min-height ; resize: none empêche l'utilisateur de l'agrandir — retirez-le si les messages sont longs.
Orbes de fond (CSS — .glass-input-orb--1, --2) violette 140 px et cyan 100 px, floues à 50 px, opacité 40 % Elles ne servent qu'à donner au verre quelque chose à flouter dans la démo. Sur votre page, supprimez-les et posez les champs sur votre image : c'est elle qui fera l'effet. La scène de 300 × 220 px (.glass-input-scene) peut disparaître avec elles.

FAQ

Parce que la zone n'est pas vide. Tout ce qui se trouve entre <textarea> et </textarea> devient sa valeur, espaces et retours à la ligne compris : six espaces d'indentation suffisent à donner une valeur non vide, et :placeholder-shown reste faux pour toujours (mesuré). Dans le code vendu, les deux balises sont collées. Si votre éditeur ou votre outil de formatage réindente le HTML, vérifiez qu'il ne glisse pas de blanc entre elles.
Le verre ne floute que ce qui est derrière lui. Sur un fond uni, un flou de 16 px ne change rien à l'œil, et il ne reste qu'un fond blanc à 6 % : une case grise. Il faut une image, un dégradé à motifs ou des formes nettes sous les champs — les orbes du code jouent ce rôle dans la démo. Sur les trois scènes de cette page, ce sont la toiture, la longère et l'affiche : les rangs d'ardoise ou les rayons passent flous sous les champs, nets autour, et c'est cette différence qui fait l'effet.
Ici, le formulaire lui-même est translucide : pas de carte de verre autour, chaque champ est sa propre vitre posée sur le fond, et rien ne bouge en dehors du focus. C'est le choix à faire quand la photo derrière compte autant que le formulaire — un lieu, un chantier, une affiche. Glow Input (fx-0293, catégorie Formulaires) fait l'inverse : un seul champ sans aucun flou, teinté d'indigo à 5 %, dont tout l'effet est la bordure qui s'allume au focus (anneau de 4 px et halo de 20 px) — à choisir sur un fond sombre et uni, là où le verre n'aurait rien à flouter. Si vous voulez un panneau entier en verre autour des champs, posez-les dans Glass Card (fx-0301) en retirant le fond des champs.