Sviluppatore / CSS
Generatore di box-shadow CSS
Crea visivamente un box-shadow CSS: offset, sfocatura, diffusione, colore, opacità, inset e più livelli, con preset e anteprima in tempo reale, poi copia il CSS.
Generatore di box-shadow CSS: Ogni livello diventa un'ombra nell'elenco box-shadow: offset orizzontale e verticale, raggio di sfocatura, diffusione e un colore scritto come rgb() con l'opacità dopo una barra. I livelli vengono disegnati mettendo il primo in cima. Puoi modificare il raggio degli angoli, il colore e lo sfondo del box di anteprima per adattarli al tuo design; l'ombra segue gli angoli proprio come farà nella tua pagina. Funziona al 100% localmente nel browser, senza caricare file sul server.
- Categoria
- Strumenti per sviluppatori
- Esecuzioni
- Nel browser
- Costo
- Gratuito · senza registrazione
- Disponibilità
- Pronto all'uso
Funziona interamente nel browser
CSS
box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
I valori indicano offset a destra, offset verso il basso, sfocatura, estensione e colore. Diversi livelli sottili hanno un aspetto più naturale di un'unica ombra marcata; i livelli successivi vengono disegnati sotto quelli precedenti.
Preimpostazioni
Profondità
I sistemi di design usano le ombre per mostrare quanto un elemento sembri sollevato dalla pagina: una scheda ferma ha un'ombra piccola e compatta, mentre un menu o una finestra di dialogo ne ha una più grande e sfumata. Mantenere alcuni livelli fissi, invece di usare un'ombra diversa ovunque, rende l'interfaccia più coerente.
Su uno sfondo scuro le ombre si vedono a malapena; in questi casi, una superficie di colore più chiaro o un bordo sottile svolgono la stessa funzione. Abbina le ombre a un gradiente CSS per pulsanti e schede.
Ombre e prestazioni
Una sfocatura ampia richiede più risorse per essere disegnata rispetto a una piccola, soprattutto quando molti elementi con ombre scorrono o si animano contemporaneamente. Per animare un'ombra al passaggio del mouse, è più fluido fare apparire gradualmente una seconda ombra più intensa su uno pseudo-elemento usando l'opacità, invece di modificare box-shadow a ogni fotogramma.
Come usarlo
- Parti da un preset oppure regola l'offset, la sfocatura, la diffusione e l'opacità del primo livello.
- Aggiungi altri livelli per un'ombra più morbida e realistica, oppure seleziona inset per creare un'ombra interna al box.
- Copia la dichiarazione box-shadow.
Privacy e limitazioni
Tutto funziona nel browser; l'ultima ombra viene conservata solo in questo browser.
Strumenti correlati
Domande frequenti
Quali sono i quattro numeri in box-shadow?
L'offset orizzontale (un valore positivo sposta l'ombra verso destra), l'offset verticale (un valore positivo la sposta verso il basso), il raggio di sfocatura (un valore maggiore crea un'ombra più morbida e non può essere negativo) e la diffusione (un valore positivo rende l'ombra più grande del box, uno negativo più piccola). Il colore viene indicato alla fine.
Come posso rendere naturale un'ombra?
Usa un'opacità bassa, sposta l'ombra verso il basso come se la luce arrivasse dall'alto e combina due o più livelli: uno piccolo e più definito vicino al box e uno più grande e morbido, più distante. Una diffusione leggermente negativa impedisce a una sfocatura ampia di comparire sui lati.
Cosa fa inset?
Disegna l'ombra all'interno del box invece che all'esterno, facendo sembrare il box premuto verso l'interno: è adatto ai campi di input e ai pulsanti premuti.
Perché la mia ombra non appare su un'immagine?
box-shadow viene disegnato intorno al box dell'elemento, non intorno alla forma dell'immagine al suo interno. Per il contorno di un PNG trasparente, usa invece il CSS filter drop-shadow().
Strumento gratuito · nel browser esecuzioni · senza account