Generatore di ombre CSS
Modella un'ombra con i cursori e copia il CSS.
Riquadro e sfondo
Funziona nel browser. Quello che scrivi non viene inviato da nessuna parte.
- Fino a 8 livelli sovrapposti
- Ombre interne
- 6 preset pronti all'uso
Come creare un'ombra CSS
- Parti da un preset, oppure sposta i cursori di spostamento, sfocatura ed estensione.
- Aggiungi livelli per un'ombra più morbida e naturale.
- Copia la riga box-shadow nel tuo CSS.
Cosa fa ogni valore di box-shadow
| Valore | Significato | Intervallo tipico |
|---|---|---|
| Spostamento X | Muove l'ombra a destra, o a sinistra se negativo | da -100 a 100px |
| Spostamento Y | Muove l'ombra in basso, o in alto se negativo | da -100 a 100px |
| Sfocatura | Ammorbidisce il bordo; 0 dà un'ombra dai bordi netti | da 0 a 200px |
| Estensione | Ingrandisce o riduce l'ombra prima che venga sfocata | da -100 a 100px |
| Opacità | Quanto appare piena la tinta dell'ombra | 10-30% per un aspetto naturale |
Valori di partenza per gli effetti più comuni
| Preset | Spostamento Y | Sfocatura | Estensione | Opacità |
|---|---|---|---|---|
| Morbida | 10px | 30px | -5px | 20% |
| Netta | 6px (anche X) | 0px | 0px | 100% |
| Bagliore | 0px | 24px | 4px | 55% |
| Interna | 2px | 6px | 0px | 25% |
A livelli e Fluttuante si basano su questi valori sovrapponendo due o tre ombre insieme, cosa che un singolo livello non può riprodurre.
Consigli per ombre dall'aspetto naturale
- La luce reale proietta raramente un'ombra di un nero puro. Usa un'opacità dal 10 al 30 percento, e avvicina il colore alla tonalità dello sfondo per un risultato più morbido.
- Sovrapponi 2 o 3 ombre: una piccola e stretta vicino al riquadro e una più grande e sfocata più lontano, come sono costruiti i preset A livelli e Fluttuante.
- Un'estensione negativa con un grande spostamento verticale dà l'aspetto della scheda fluttuante comune nelle interfacce moderne.
- Un genitore con overflow: hidden ritaglia un'ombra esattamente come ritaglia il contenuto, quindi aggiungi un padding al genitore invece di rimuovere overflow ovunque.
Domande su Generatore di ombre
Cosa significano i valori di box-shadow?
In ordine: spostamento orizzontale, spostamento verticale, raggio di sfocatura, raggio di estensione e colore. Spostamenti positivi muovono l'ombra a destra e in basso, e la parola chiave inset la disegna dentro il riquadro.
Come rendo un'ombra naturale?
Sovrapponi due o tre ombre morbide con opacità bassa: una piccola e stretta vicino al riquadro e una più grande e sfocata più lontano. Le ombre reali sono raramente di un nero puro a piena intensità.
Cosa fa l'estensione?
L'estensione ingrandisce o riduce l'ombra prima che venga sfocata. Un'estensione negativa con un grande spostamento verticale dà l'aspetto della scheda fluttuante.
Perché la mia ombra è tagliata?
Un elemento genitore con overflow: hidden ritaglia tutto ciò che viene disegnato fuori dal suo riquadro, ombre comprese. Aggiungi un padding al genitore o rimuovi l'impostazione overflow.
Quanti livelli di ombra posso sovrapporre?
Fino a 8 in questa pagina. Il CSS di per sé non ha un limite fisso per i livelli di box-shadow, ma oltre 3 o 4 la differenza si nota raramente e costa di più da disegnare.
Un'ombra cambia le dimensioni o la spaziatura di un elemento?
No. Una box-shadow è puramente visiva e non influisce mai sul layout, a differenza di un bordo o di un contorno, quindi gli elementi vicini non si spostano mai quando ne aggiungi o ridimensioni una.