Estil visual de la landing glassphormism amb Tailwind
Aquest estil que descrius està molt de moda en el disseny web modern, especialment en el sector de les startups de l'ecosistema AI, Web3 i SaaS d'alt valor. És un disseny que entra pels ulls instantàniament perquè transmet sofisticació, modernitat i potència tècnica.
Anem a ampliar la informació sector per sector perquè tinguis tot el context, referències i trucs tècnics per dominar-lo.
1. Com definir aquest estil en una sola paraula (o concepte)
Si haguessis de dir-ho a un altre dissenyador o programador en un sol segon, els conceptes clau en la indústria són:
Dark Premium (El més utilitzat a nivell de negoci).
Linear Web Design (Anomenat així perquè l'empresa Linear va popularitzar aquests fons foscos amb línies fines, "glows" i estètica neta).
Sci-Fi Minimalisme (Més enfocat a la part visual).
2. Radiografia de les Peces Visuals Clau (Anàlisi profund)
Per què funciona tan bé aquesta combinació? No és només un tema estètic; té un sentit psicològic i de conversió (UI/UX).
El fons fosc i els Gradients (Ambientació)
El fons fosc (que mai és un negre pur #000000, sinó blaus molt foscos, grisos d'alta nit o liles) redueix la fatiga visual. Els gradients de fons simulen llums de neó en la foscor, dirigint la mirada de l'usuari exactament cap a on tu vols (el text central o el botó d'acció).
Glassmorphism (Jerarquia i Profunditat)
L'efecte vidre esmorteït (backdrop-blur) fa que les targetes (cards) semblin surar sobre el fons de gradients. Això crea capes visuals. L'usuari entén de manera intuïtiva que el que està "més a prop" (la card translúcida) és el contingut important.
Tipografia i "Glow" (Llum)
Tipografia forta: En utilitzar fons foscos, necessites lletres amb molt de pes (com font-black) i espais compactes (tracking-tighter) perquè el text "es llegeixi com un bloc homogeni" i no es perdi en la foscor.
Glow (Brillantor): Les vores fines il·luminades i les ombres de colors (box-shadows amb opacitat) imiten les pantalles de ciència-ficció, donant una sensació d'alta tecnologia ("High-Tech").
3. Ampliació del Codi: Patrons de Tailwind CSS Avançats
Has capturat molt bé la base de Tailwind, però per portar aquest estil al següent nivell i fer que sembli realment premium, aquí tens les combinacions exactes de classes que s'utilitzen:
La Card Perfecta de Glassmorphism
Perquè el "glass" quedi fi, el secret és una vora blanca gairebé invisible i un fons molt subtil.
<div class="bg-slate-900/40 backdrop-blur-xl border border-white/10 rounded-2xl p-6 shadow-[0_0_50px_-12px_rgba(255,255,255,0.05)]">
<!-- Contingut -->
</div>
El Botó "Glow" de Conversió (CTA)
Un botó que cridi l'atenció sense ser xaró, utilitzant transicions orgàniques.
<button class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-semibold px-6 py-3 rounded-xl shadow-[0_0_20px_rgba(59,130,246,0.4)] hover:shadow-[0_0_30px_rgba(59,130,246,0.6)] hover:scale-[1.02] transition-all duration-300">
Comença ara
</button>
El text amb Gradient (Típic de titular SaaS)
Per fer que els títols principals tinguin aquest toc futurista.
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tighter bg-clip-text text-transparent bg-gradient-to-b from-white to-slate-400">
El futur de la teva SaaS.
</h1>
4. Referents reals en el mercat (Per inspirar-te)
Si vols veure aquest estil aplicat exactament al món real per agafar idees de disseny, anima't a buscar les webs de:
Linear (linear.app) – Els reis absoluts d'aquest estil.
Vercel (vercel.com) – Especialistes en línies fines, contrast fosc i minimalisme tech.
Supabase (supabase.com) – Combinació de dark mode, glassmorphism i detalls de colors vius (verd/neó).
Raycast (raycast.com) – Gradients de fons molt cuidats i UI premium de conversió.
💡 Consell de disseny per al futur: El perill d'aquest estil és que les lletres petites es llegeixin malament sobre fons foscos. Assegura't sempre que el text secundari tingui prou contrast (per exemple, un gris clar com text-slate-300 o text-zinc-400, mai fosc).
T'agradaria que aprofundíssim en algun d'aquests punts, com per exemple com crear els efectes de llum de fons (els anomenats radial-gradients) en CSS?