Categoria: Sviluppo
Generatore di Box Shadow CSS
Progetta una box-shadow e copia il CSS
Regola scostamento, sfocatura, estensione, colore e opacità, guarda l'anteprima dal vivo e copia una dichiarazione box-shadow pronta da incollare. Tutto viene disegnato dal tuo browser.
box-shadow: 0px 8px 24px -4px rgba(23, 33, 28, 0.24);
Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.
A cosa serve
box-shadow prende cinque valori in un ordine fisso, e piccole modifiche a uno qualsiasi si leggono in modo molto diverso sullo schermo: scriverla alla cieca è scomodo. Questo strumento disegna la dichiarazione reale su un riquadro di anteprima mentre muovi i cursori. Si può aggiungere un secondo livello di contatto più stretto — l'abbinamento che i designer usano perché un elemento sembri sollevato invece che sfocato — e l'opzione interna rovescia l'ombra verso l'interno, per superfici incassate.
Come si usa
- Regola scostamento orizzontale e verticale, sfocatura ed estensione.
- Scegli colore e opacità e, se vuoi, attiva l'ombra interna o un livello di contatto.
- Copia la dichiarazione box-shadow nel tuo foglio di stile.
Privacy
Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.
Domande frequenti
- Viene caricato qualcosa?
- No. L'anteprima è un'ombra CSS dipinta dal tuo browser e la dichiarazione viene composta nella pagina.
- A cosa serve l'estensione?
- L'estensione allarga o restringe l'ombra prima che venga sfocata. Un valore negativo la richiude, ed è il modo per impedire che un'ombra morbida sbordi ai lati dell'elemento.
- Perché usare due livelli?
- Una sola ombra larga e morbida tende a sembrare nebbia. Aggiungere un livello piccolo e più scuro vicino all'elemento gli dà un bordo di contatto, e i due insieme si leggono come altezza.