Generatore di box-shadow CSS

Funzionalità di Generatore di box-shadow CSS

• 01

  Ogni parametro come un cursore

  Gli offset orizzontali e verticali, il raggio di sfocatura, il raggio di propagazione e l'opacità hanno ciascuno il proprio cursore più un input numerico — messa a punto fine tramite trascinamento, quindi regolazione tramite tastiera per precisione ai pixel.

• 02

  Ombre interiori supportate

  Attiva/disattiva l'interruttore interiore per passare da un'ombra esterna a un'ombra interna — utile per pulsanti premuti, input incassati e superfici neumorfiche.

• 03

  Colore + opacità, separatamente

  Scegli il colore di base in qualsiasi valore hex, quindi regola l'opacità indipendentemente. L'output utilizza rgba() in modo che il colore e l'alfa rimangono leggibili quando copi il CSS.

Domande frequenti su Generatore di box-shadow CSS

Cosa fa il valore di propagazione?

La propagazione positiva ingrandisce l'ombra in tutte le direzioni prima che venga applicata la sfocatura; la propagazione negativa la riduce. È utile per brillamenti stretti e definiti quando abbinato a una piccola sfocatura.

Posso aggiungere più ombre?

Questo generatore produce una singola dichiarazione di ombra. Per sovrapporre le ombre, copia il valore, quindi incollalo due volte nel tuo CSS separato da una virgola — box-shadow accetta un elenco separato da virgole.

Perché la mia ombra interiore è invisibile?

Le ombre interiori vengono disegnate dentro l'elemento, quindi hanno bisogno di un colore di sfondo o di padding per essere visibili. Inoltre non appariranno su elementi trasparenti o con dimensioni zero.

L'anteprima è precisa ai pixel?

Sì — l'anteprima utilizza la proprietà CSS box-shadow reale su un elemento reale, quindi quello che vedi è esattamente quello che il tuo foglio di stile renderizzerà.