Generatore di Ombre CSS
Cos'è Generatore di Ombre CSS
Un generatore di ombre CSS ti permette di comporre un box-shadow in modo visivo e copiare il CSS esatto. Imposta lo scostamento orizzontale e verticale, il raggio di sfocatura, l'estensione e il colore dell'ombra con la sua opacità, e guarda l'anteprima aggiornarsi mentre trascini ogni cursore. Puoi impilare più ombre sullo stesso elemento e impostare qualsiasi livello come interno, così la casella di output contiene sempre una dichiarazione box-shadow pronta da incollare.
Come usare
- Trascina i cursori di scostamento per spostare l'ombra in orizzontale e in verticale.
- Regola il raggio di sfocatura per un bordo morbido e l'estensione per ingrandire o ridurre l'ombra.
- Scegli il colore dell'ombra, regola l'opacità e attiva interna per un'ombra dentro l'elemento.
- Aggiungi altri livelli se servono, poi copia il CSS generato dalla casella di output.
Quando usarlo
Ti serve un'ombra da card discreta, dall'aria moderna invece che dura? Metti lo scostamento a 0px e 10px, 20px di sfocatura, nessuna estensione e colore nero al 25% di opacità, poi copia box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25); direttamente nel tuo foglio di stile. Comodo anche per gli stati hover dei pulsanti, la profondità a livelli o un'ombra interna che fa sembrare un campo affossato.
Domande frequenti
Cosa significano i valori di box-shadow?
Nell'ordine sono lo scostamento orizzontale, lo scostamento verticale, il raggio di sfocatura, l'estensione e il colore. Gli scostamenti positivi spingono l'ombra a destra e in basso, la sfocatura ammorbidisce il bordo e l'estensione ingrandisce o riduce tutta l'ombra prima che venga sfocata.
A cosa serve il valore di estensione?
L'estensione cambia la dimensione dell'ombra prima che venga applicata la sfocatura. Un valore positivo rende l'ombra più grande dell'elemento, uno negativo la stringe, utile per ombre strette che sporgono solo da un lato.
Posso impilare più di un'ombra?
Sì. Aggiungi tutti i livelli che vuoi e ciascuno diventa un'ombra separata da virgola nella stessa regola box-shadow. Impilare un'ombra larga e morbida sotto una più vicina e stretta è un modo comune per ottenere profondità realistica.
Cos'è un'ombra interna?
Un'ombra interna viene disegnata dentro l'elemento invece che dietro, così la casella sembra premuta o incassata. Attiva interna su un livello per cambiarlo, cosa che funziona bene con campi di modulo e pulsanti premuti.
Posso condividere questo strumento con i miei dati precompilati?
Sì. L'URL si aggiorna automaticamente mentre regoli i cursori. Copialo dalla barra degli indirizzi o usa il pulsante Condividi, e chiunque apra il link vedrà la tua ombra esatta pronta all'uso.
Strumenti correlati
Calcolatore di Rapporto d'Aspetto
Calcola il rapporto d'aspetto, trova la larghezza o l'altezza mancante e ridimensiona immagini e video mantenendo le proporzioni. Gratis.
Generatore di Codice a Barre
Genera codici a barre EAN-13 o Code 128 online. Inserisci il numero o testo e scarica come SVG o PNG. Gratuito, senza registrazione.
Decodificatore Base64
Decodifica stringhe Base64 in testo semplice istantaneamente. Supporta output Unicode completo con emoji. Decodificatore Base64 gratuito.