Componi una proprietà box-shadow CSS

Con Generatore di ombre, designer e sviluppatori front-end possono regolare un’interfaccia prima di implementarla. Componi una proprietà box-shadow CSS.

Componi una proprietà box-shadow CSS. Lo strumento è gratuito nel browser e mostra il risultato senza richiedere un account.

Come si usa

Inserisci lo spostamento orizzontale e verticale dell'ombra, poi i valori di sfocatura e diffusione.
Indica il colore in formato esadecimale, usando sei cifre precedute dal cancelletto.
Fai clic sul pulsante genera per ottenere la proprietà box-shadow completa.
Copia la regola prodotta e incollala nel tuo foglio di stile per applicarla.
Regola i valori se la resa non corrisponde all'effetto desiderato.

Esempio

L'input di esempio descrive un'ombra spostata con sfocatura e un colore scuro. Dopo la generazione, il risultato mostra la proprietà box-shadow corrispondente. Puoi cambiare un valore alla volta per vedere come ogni impostazione influisce sull'ombra.

Input

Risultato

box-shadow: 2px 2px 8px 1px #000000;

Limiti e formati

Lo strumento non mostra un'anteprima dell'ombra su un elemento; fornisce solo il codice CSS.
I valori di spostamento, sfocatura e diffusione devono essere numerici, e gli spostamenti possono essere negativi.
Il colore deve essere esadecimale valido; un colore malformato impedisce la generazione.
La resa finale dipende dal browser e dal contesto dell'elemento.

Dove avviene il trattamento

Tutto avviene nel tuo browser. Le impostazioni che inserisci restano sul tuo dispositivo e non vengono mai caricate né memorizzate. La proprietà CSS viene assemblata localmente, senza connessione esterna.

Domande frequenti

Quali unità devo usare per gli spostamenti e la sfocatura?

Di solito i valori sono senza unità per spostamenti e sfocatura, poiché rappresentano pixel. Puoi anche aggiungere un'unità come px o rem. Mantieni la stessa logica per tutti i valori.

Posso usare un colore trasparente?

Il campo si aspetta un colore esadecimale. Per un'ombra trasparente, puoi usare un colore con canale alfa se il formato lo consente, ma l'approccio più semplice è scegliere un colore solido e regolare l'opacità nel tuo CSS.

Perché la mia ombra non è visibile?

Controlla che la proprietà sia applicata a un elemento con una dimensione visibile. Un valore di sfocatura o diffusione troppo piccolo può rendere l'ombra invisibile. Assicurati anche che il colore non sia identico allo sfondo.