Come si usa
- Regola Spostamento orizzontale e Spostamento verticale per posizionare l’ombra.
- Imposta Sfocatura ed Espansione e osserva le modifiche nell’anteprima.
- Scegli Colore e regola Opacità.
- Attiva Interna (inset) se vuoi disegnare l’ombra dentro il riquadro.
- Premi Copia CSS (oppure Copia valore, se ti serve solo il valore) e incolla il codice nella regola CSS del tuo elemento.
Esempi
Ombra morbida per una scheda prodotto
Spostamento orizzontale: 0; Spostamento verticale: 8; Sfocatura: 24; Espansione: 0; Colore: #2451E8; Opacità: 0.35; Interna (inset): disattivata.
box-shadow: 0 8px 24px 0 rgba(36, 81, 232, 0.35);
Ombra a due livelli per un pannello
Primo livello: spostamenti 0 e 2, sfocatura 4, espansione -2. Secondo livello: spostamenti 0 e 4, sfocatura 6, espansione -1. Entrambi: colore #000000, opacità 0.1, ombra esterna.
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
Ombra interna per un pulsante premuto
Spostamento orizzontale: 0; Spostamento verticale: 2; Sfocatura: 4; Espansione: 0; Colore: #000000; Opacità: 0.25; Interna (inset): attivata.
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.25);
Suggerimenti
- Scegli il colore dell'ombra con Codici colori HTML.
- Abbinala a uno sfondo sfumato creato con il generatore di gradienti CSS.
Domande frequenti
Quante ombre posso sovrapporre con box-shadow?
Puoi usare da 1 a 4 livelli con + Aggiungi livello. Il primo viene disegnato sopra gli altri; cambia l’ordine con ↑ Sposta su e ↓ Sposta giù.
Il colore di sfondo e il raggio vengono inclusi nel CSS?
Colore riquadro, Sfondo e Raggio modificano solo l’anteprima. Il CSS generato contiene soltanto box-shadow.
Quali formati di colore posso inserire?
Colore accetta #RGB e #RRGGBB, anche senza # e con lettere maiuscole o minuscole. I codici esadecimali con canale alfa non sono accettati: imposta la trasparenza con Opacità; il colore viene scritto nel CSS come rgba().
Perché l’anteprima non cambia quando inserisco un valore?
Se un campo contiene un valore non valido, l’anteprima e il CSS mantengono l’ultima ombra valida. Usa pixel interi: da -200 a 200 per gli spostamenti e l’espansione, da 0 a 300 per la sfocatura; l’opacità deve essere compresa tra 0 e 1.
Le impostazioni restano salvate quando chiudo la pagina?
I livelli e le impostazioni dell’anteprima vengono salvati nel localStorage del browser e ripristinati alla visita successiva. Reimposta elimina lo stato salvato e ripristina i valori predefiniti.