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à.
Come usare Generatore Box Shadow CSS
Progetta le ombre CSS box-shadow visivamente invece di tirare a indovinare i valori. Il generatore gira in locale nel tuo browser e nulla di ciò che inserisci viene caricato.
- Regola H-Offset e V-Offset per spostare l'ombra in orizzontale e in verticale.
- Aumenta Blur per ammorbidire i bordi e usa Spread per ingrandire o ridurre l'ombra.
- Scegli un Color e regola la sua Opacity per un effetto più morbido e naturale.
- Spunta Inset per disegnare l'ombra all'interno dell'elemento invece che attorno.
- Copia la regola box-shadow finita dall'anteprima nel tuo foglio di stile.
Un blur ridotto con un piccolo V-Offset positivo crea un'ombra di contatto sottile e realistica proprio sotto l'elemento.
Strumenti correlati
- Generatore di Border Radius CSS Generatore visuale di border-radius CSS. Regola ogni angolo indipendentemente con anteprima in tempo reale e copia il codice CSS istantaneamente.
- Generatore Gradienti CSS Crea stupendi gradienti CSS visivamente. Genera gradienti lineari, radiali e conici con più punti di colore, angoli e posizioni. Copia istantaneamente codice CSS pronto per la produzione.
- Generatore CSS Grid Generatore CSS Grid visuale gratuito con anteprima dal vivo. Progetta layout a griglia responsive interattivamente ed esporta codice CSS pronto per la produzione.
- Generatore CSS Flexbox Generatore CSS Flexbox visuale con anteprima dal vivo. Regola le proprietà flex e ottieni codice CSS pronto all'uso.
- Generatore di Border Radius Generatore di border radius creativo gratuito online. Trascina 8 punti o scegli una forma blob per creare figure CSS organiche e copiare il codice all'istante.
- Convertitore Colore Convertitore colore online gratuito. Converti formati HEX, RGB, HSL, HSV istantaneamente con selettore visivo. 100% privato, funziona nel tuo browser.
- Generatore di Easing CSS Generatore online gratuito di easing CSS. Trascina i punti di controllo del cubic-bezier su una curva interattiva, scegli tra 18 preset, guarda una pallina in loop e copia la funzione di timing all'istante.
- Generatore Text Shadow CSS Generatore online gratuito di text-shadow CSS. Sovrapponi più livelli d'ombra con offset, sfocatura, colore e opacità, prova preset come Neon, 3D o Retro e copia il CSS all'istante.