Generatore di CSS Box Shadow con Anteprime su Card | We.Inc
Crea box shadow CSS a più livelli e vedili su vere card di servizio e prezzo, su sfondi chiari e scuri, con uno stato di focus visibile. Copia il CSS e un componente card pronto.
Le ombre sono difficili da giudicare su un quadrato grigio. Qui regoli un box-shadow a più livelli e lo vedi su una card di servizio e una card di prezzo, su una pagina chiara o scura, con un anello di focus da tastiera che puoi testare con Tab. Copia il CSS o l'intero componente card quando ti sembra giusto. Tutto gira nel tuo browser. Niente di ciò che digiti viene inviato a We.Inc o a chiunque altro, e sparisce quando chiudi la scheda.
Parti da un preset o regola il primo livello: offset orizzontale e verticale, sfocatura, diffusione, colore, opacità e inset.
Aggiungi fino a cinque livelli. Le ombre a più livelli (una stretta più una larga e morbida) sembrano più naturali di un'unica ombra grande.
Passa l'anteprima tra una pagina chiara e una scura. Premi Tab per spostare il focus sui pulsanti della card e verifica che l'anello di focus resti visibile.
I controlli avvisano quando l'ombra è troppo tenue da vedere sullo sfondo scelto e quando il testo della card scende sotto il contrasto WCAG AA.
Copia la dichiarazione box-shadow, o l'intero componente card con HTML e CSS.
Su sfondi scuri le ombre quasi scompaiono. Usa un colore della card leggermente più chiaro o un bordo sottile per separare la card invece.
Mantieni il colore dell'ombra tinto verso il tuo sfondo piuttosto che nero puro per un aspetto più morbido.
Non affidarti mai a un'ombra da sola per mostrare il focus. Usa anche un contorno chiaro.
Valori di sfocatura elevati sono più costosi da disegnare. Evita di animarli su liste lunghe.
Usa uno o due livelli di ombra in tutto il sito, così la profondità significa qualcosa.
Domande frequenti
Come funziona la proprietà CSS box-shadow?
box-shadow accetta un offset orizzontale, un offset verticale, un raggio di sfocatura opzionale, una diffusione opzionale e un colore, più la parola chiave inset per le ombre interne. Si possono elencare più ombre, separate da virgole; la prima è disegnata sopra.
Perché le ombre a più livelli sembrano migliori?
Gli oggetti reali proiettano un'ombra nitida vicino a loro e una morbida e larga più lontano. Due o tre livelli con sfocatura crescente e opacità decrescente imitano questo.
Perché la mia ombra è invisibile su uno sfondo scuro?
Un'ombra scura su una pagina scura ha quasi nessun contrasto. Lo strumento ti avvisa di questo. Solleva la card con un colore di superficie più chiaro o un bordo sottile invece.
Il box-shadow influisce sull'accessibilità?
Le ombre sono decorazione, quindi non devono rispettare regole di contrasto da sole. Ciò che conta è che il testo sulla card resti leggibile e che il focus sia mostrato con un contorno visibile, non solo un cambio di ombra.
Il generatore di CSS shadow è gratuito?
Sì, senza registrazione. Copia il codice in qualsiasi progetto.
Testa le ombre sui componenti che pubblicherai
Un'ombra che sembra giusta su un quadrato isolato può sembrare pesante su una riga di card di prezzo o svanire sotto una foto. Vederla in anteprima sulle card che un sito di piccola impresa usa davvero, una card di servizio con un'icona e un piano prezzi evidenziato, mostra il risultato che otterrai.
Il codice del componente include un contorno focus-visible, quindi la card resta usabile con una tastiera qualunque ombra tu scelga.