Glass panel
Style
Glassmorphism
Transparence, flou d’arrière-plan (backdrop-filter), bordure claire, couches flottantes. Popularisé ~2020 (Windows Fluent, macOS).
Page de référence : chaque carte montre un style ou un effet tel qu’on le rencontre dans le design produit / marketing contemporain. Ce n’est pas adapté à LearningStudio — c’est un catalogue pour comparer et choisir.
Lab marque : /styles · Cette page : /touslestyles · Liste non exhaustive (les tendances évoluent).
Courants / esthétiques — l’identité globale d’une interface ou d’une marque.
Transparence, flou d’arrière-plan (backdrop-filter), bordure claire, couches flottantes. Popularisé ~2020 (Windows Fluent, macOS).
Évolution du glass : highlights internes, refraction simulée, coins très arrondis — direction Apple Vision / iOS récents.
Variante Microsoft : flou fort + saturation, matériaux « acrylique » sur fond coloré.
Extrusions douces clair/ombre sur fond uni. Peu contrasté — souvent déconseillé pour l’accessibilité.
Volumes « argile » 3D soft, ombres internes + externes, formes jouets — plus fun que le neuro classique.
Couleurs vives, bordures noires épaisses, ombre offset dure, typo grasse — Gumroad / trendy SaaS.
Intentionnellement brut, monospace, contraste hard — anti-corporate / art direction.
Couleurs plates, peu d’ombres, icônes simples — post-skeuomorphisme (iOS 7, Material early).
Google : surfaces, élévation (ombres), FAB, motion intentionnelle, grille 8dp.
Imitation du réel (cuir, métal, boutons physiques) — iOS pré-7, dashboards vintage.
Fonds noirs purs, texte lumineux, économie d’énergie écran — apps night / cinéma.
Magenta/cyan, glow tubes, contrastes électriques — gaming, crypto, nightlife.
Dégradés rose-cyan, soleil, grille perspective, nostalgie 80–2000.
Motifs géométriques kitsch 80s, pastels + noir, formes arbitraires.
Grille stricte, Helvetica-like, rouge signal, asymétrie contrôlée.
Cercle / triangle / carré primaires, rouge-bleu-jaune, fonction avant décor.
Espace négatif, peu d’éléments, typo discrète — « less is more ».
Surcharge volontaire de motifs, couleurs, calques — anti-minimal.
Serif display, colonnes, kickers, esthétique presse.
Volumes en perspective isométrique, illustrations produit.
Formes fluides, morphing, nature / wellness / créatif.
Dégradés multi-points animés, fonds « ciel boréal » — heroes 2022–26.
Image / forme en deux couleurs saturées — Spotify-like.
Une seule teinte / niveaux de gris pour cohérence forte.
Noir/blanc forcé, focus visible — accessibilité / OS high-contrast.
Traits, peu de fill — wire, tech, diagrams.
Textures papier, ombres de découpe, scrapbook digital.
Grille asymétrique type plateau japonais — Apple / Linear marketing.
Beaucoup de data, cards compactes, densité SaaS B2B.
Fond noir, vert phosphor, curseur — docs dev, CLI branding.
Bevels, gris système, titres bleus — nostalgie desktop.
Techniques appliquées sur un composant (ombre, grain, bordure…) — combinables avec n’importe quel style.
Texture bruit SVG ou PNG en overlay — casse le « trop clean digital ».
Ombre offset longue et opaque — flat/neubrutal.
Creux, wells, champs enfoncés.
Halo lumineux multi-couches — dark UI, CTA.
Flou de ce qui est derrière l’élément — base du glass.
Contour en dégradé via mask / pseudo — cards premium.
Dégradé animé type hologramme / foil.
Lignes horizontales type tube cathodique.
Décalage R/B, tremblement — erreur, cyber.
Radial qui suit le pointeur — Linear / Vercel.
Patterns d’animation fréquents en web moderne.
Plans qui bougent à des vitesses différentes.
Bandeau défilant logos / keywords.
translateY + ombre au survol — cards cliquables.
Reflet sous le curseur (Material-like).
Placeholders animés pendant le fetch.
border-radius qui mute en boucle.
Éléments qui apparaissent avec délai.
Chevron / bounce invitant à scroller.
Texte qui se déforme / pulse — campagnes bold.