Generatore CSS box-shadow (ombre dei riquadri)
Strumento gratuito che genera il box-shadow dei CSS con anteprima, regolando con i cursori scostamento, sfocatura, diffusione, colore e opacità. Il codice prodotto si copia con un clic.
Consigli per l'uso
- Oltre ai cursori potete digitare direttamente i valori: comodo quando serve un numero preciso.
- Attivando «inset» l'ombra viene disegnata all'interno dell'elemento, con l'effetto di una superficie incavata.
- Aumentando lo spread si allarga tutto il contorno dell'ombra, mentre aumentando il blur il contorno sfuma e l'impressione diventa più morbida.
- Più si abbassa l'opacità, più l'ombra risulta leggera e naturale, e più lo sfondo resta percepibile nelle composizioni con elementi sovrapposti.
- Il CSS generato si incolla direttamente nel foglio di stile. Provate ad abbinarlo agli effetti al passaggio del mouse su pulsanti e schede.
Domande frequenti
A proposito — come box-shadow ha cambiato il design web
Prima che box-shadow venisse standardizzato nei CSS3, per rappresentare un'ombra sul web bisognava applicare come sfondo un PNG con l'ombra già disegnata, oppure sovrapporre più elementi div con sfondi sfumati per simularla: metodi laboriosi. Bastava modificare di poco la forma o la sfocatura per dover rifare l'immagine, e sperimentare costava moltissimo.
Dal 2009 circa, con l'arrivo di box-shadow nei browser come parte dei CSS3, generare un'ombra è diventato affare di una sola riga di CSS. Non dovendo più preparare immagini, le pagine si sono alleggerite ed è nato il vantaggio di un'ombra che non si deforma al variare della dimensione dello schermo nei layout responsivi.
Nel Material Design presentato da Google nel 2014 è stato introdotto il concetto di «elevation», costruito proprio sul box-shadow: assegnando a ogni elemento un'altezza diversa lungo l'asse Z e rendendo l'ombra più ampia e intensa per gli elementi più alti, si ottiene una gerarchia in profondità dentro uno schermo piatto. È un'idea che influenza ancora oggi molti sistemi di progettazione.