Generatore Box Shadow CSS
Generatore online gratuito di box-shadow CSS. Crea visivamente ombre bellissime con offset, sfocatura, diffusione, colore e inset regolabili. Anteprima live e copia codice istantanea.
Cos'è CSS box-shadow?
CSS box-shadow è una proprietà CSS che aggiunge effetti ombra attorno alla cornice di un elemento. Consente di creare ombre esterne, ombre interne e più livelli di ombra specificando offset, raggio di sfocatura, raggio di diffusione e valori di colore.
Quali sono i parametri di box-shadow?
La proprietà box-shadow accetta diversi valori: offset orizzontale (X), offset verticale (Y), raggio di sfocatura, raggio di diffusione, colore e la parola chiave opzionale inset. Puoi anche specificare più ombre separate da virgole.
Cos'è la parola chiave inset?
La parola chiave inset cambia l'ombra da un'ombra esterna (ombra esterna) a un'ombra interna. Quando viene specificato inset, l'ombra viene disegnata all'interno del bordo dell'elemento invece che all'esterno, creando un effetto di inserimento.
Cos'è il raggio di sfocatura?
Il raggio di sfocatura determina quanto viene sfocato il bordo dell'ombra. Un valore di 0 crea un bordo netto e solido. Valori più grandi creano un'ombra più diffusa e morbida che si estende ulteriormente dall'elemento.
Cos'è il raggio di diffusione?
Il raggio di diffusione espande o contrae la dimensione dell'ombra. Valori positivi rendono l'ombra più grande dell'elemento, mentre valori negativi la rendono più piccola. Questo influisce sull'ombra prima che venga applicata la sfocatura.
Come creo più ombre?
Puoi creare più ombre separando ogni definizione di ombra con una virgola. Ogni ombra può avere valori diversi di offset, sfocatura, diffusione e colore. Le ombre vengono applicate nell'ordine in cui sono dichiarate, con la prima ombra in alto.
Posso usare colori RGBA per le ombre?
Sì, puoi usare qualsiasi formato di colore CSS inclusi RGBA, HSLA, HEX o colori nominati. RGBA e HSLA sono particolarmente utili per creare ombre semitrasparenti che si fondono naturalmente con gli sfondi.
Come copio il codice CSS generato?
Basta fare clic sul pulsante "Copia codice" nell'interfaccia del generatore. Il codice CSS verrà copiato negli appunti e può essere incollato direttamente nel foglio di stile o nel file HTML.
box-shadow è supportato in tutti i browser?
Sì, box-shadow è supportato in tutti i browser moderni inclusi Chrome, Firefox, Safari, Edge e Opera. Fa parte di CSS3 dal 2011 e ha un'eccellente compatibilità con i browser.
box-shadow influisce sulle prestazioni?
box-shadow ha un impatto minimo sulle prestazioni dei browser moderni. Tuttavia, l'uso di più ombre complesse con grande raggio di sfocatura su molti elementi può influire sulle prestazioni di rendering, specialmente sui dispositivi mobili.
Quali sono i casi d'uso comuni per box-shadow?
Gli usi comuni includono la creazione di effetti di elevazione delle carte, l'aggiunta di profondità ai pulsanti, la creazione di campi modulo inseriti, l'implementazione di ombre material design e l'aggiunta di separazione visiva tra elementi sovrapposti.
Posso animare box-shadow?
Sì, box-shadow può essere animato usando transizioni o animazioni CSS. Tuttavia, animare box-shadow può essere intensivo in termini di prestazioni. Per prestazioni migliori, considera l'uso di pseudo-elementi con transizioni di opacità.