Generatore CSS box-shadow

Crea e copia un'ombra

1. Modifica spostamento orizzontale e verticale, sfocatura, espansione, colore e opacità di ogni livello. Scegli l'ombra interna quando deve apparire all'interno del riquadro.
2. Aggiungi, duplica o sposta i livelli per definire il risultato. Mantieni 1–8 livelli; un campo incompleto o fuori dai limiti dell'editor cancella il codice corrente finché non viene corretto.
3. Esamina l'anteprima nella vista Adatta o al 100%, poi copia la dichiarazione. Incollala in una regola CSS per l'elemento che vuoi modificare.

Comprendere ogni livello

Spostamenti orizzontali e verticali positivi muovono l'ombra a destra e in basso. La sfocatura ammorbidisce il margine; con sfocatura zero il margine è netto. L'espansione cambia la dimensione, non la morbidezza.

L'opacità appartiene al colore di ogni ombra, non all'intero riquadro. Un'ombra al 50 per cento rimane esattamente al 50 per cento nel codice; il suo colore non viene convertito in un byte alfa arrotondato.

Il primo livello è in primo piano nella propria categoria di disegno. Le ombre esterne rimangono dietro lo sfondo del riquadro, quelle interne sopra lo sfondo e sotto il bordo. Spostare le righe non permette di attraversare queste categorie.

Le lunghezze accettano punto o virgola e fino a due cifre decimali; l'opacità ne accetta una. Questi controlli dell'editor hanno limiti e non analizzano ogni espressione CSS valida. Il codice generato usa sempre il punto decimale.

Esperimenti utili con le ombre

L'esempio iniziale combina una piccola ombra morbida con valori 0, 2, 4, 0 pixel e opacità del 12.5 per cento con un'ombra più ampia di 0, 8, 16, -4 pixel e opacità del 20 per cento. Ogni riga corrisponde a una voce nel codice.

Per un effetto simile a un contorno netto, usa spostamenti e sfocatura pari a zero ed espansione positiva su un livello esterno. Rimane un'ombra, non una proprietà del bordo esportata.

Prova un livello interno con sfocatura zero e spostamento positivo per esaminarne il margine interno netto. Cambia il colore della superficie e usa la vista al 100% senza modificare la dichiarazione dell'ombra.

Cosa mostra l'anteprima

Questo editor produce 1–8 livelli box-shadow sRGB in pixel CSS. Non importa CSS, non genera ombre con il filtro drop-shadow, non sceglie un selettore e non esporta un foglio di stile completo o un'immagine.

Dimensioni del riquadro, colori opachi e raggio degli angoli nell'anteprima servono solo come contesto. La geometria e lo sfondo del tuo elemento possono modificare l'aspetto della stessa dichiarazione.

Adatta ridimensiona tutta l'anteprima. Usa la vista scorrevole al 100% per un esame più attento. Lo spazio è limitato e può tagliare le estremità sfocate; browser e schermi non necessariamente disegnano pixel identici.

Un'ombra trasparente o ridotta a zero può essere valida ma invisibile. Se il browser non può mostrare la dichiarazione corrente, lo strumento lo segnala senza sostituire l'effetto; il codice valido rimane copiabile.

La tua ombra rimane nella pagina

La modifica dell'ombra e la generazione del codice avvengono localmente senza caricare o salvare i tuoi valori. La copia avviene solo quando la richiedi. Resta applicabile l'informativa generale sulla privacy del sito.