☁️

generatore css box-shadow,

Generatore CSS box-shadow

Genera ombre CSS avanzate (box-shadow) con un'interfaccia utente intuitiva.
Uno strumento gratuito che supporta livelli multipli e gli ultimi trend di design.

🥞

Multilivello

Sovrapponi più ombre per design complessi

🎨

Preset inclusi

Applica istantaneamente Neumorfismo e altri

⚡

Supporto Tailwind

Supporta l’output CSS standard e Tailwind

Impostazioni Livelli

Parametri Ombra

Offset X (px) 0px

Offset Y (px) 4px

Sfocatura (px) 12px

Espansione (px) 0px

Colore ombra

Opacità (%) 10%

Ombra interna (inset)

Anteprima

BOX

Width

120px

Height

120px

Border Radius

12px

Colore sfondo

Colore box

Potrebbe piacerti anche

📐

Generatore di layout Flexbox/griglia

🎞️

Generatore di animazioni CSS

⬜

Generatore del raggio del bordo CSS

Informazioni

Il Generatore CSS box-shadow è uno strumento gratuito che crea stili di ombra essenziali (box-shadow) per il web design con un'interfaccia utente intuitiva.

Non solo ombre semplici, ma anche ombre ricche con più livelli, ombre sfumate come quelle utilizzate da Apple e dai moderni servizi web, 3D Neumorfismo e il piatto Neo Brutalismo possono essere creati istantaneamente dai preset.

Il codice generato può essere esportato in tre formati: proprietà CSS standard, variabili CSS (custom properties) e classi utility Tailwind CSS (supporta valori arbitrari), e può essere copiato con un singolo clic.

Come Usare

1 Scegli una base

Scegli un preset in alto che si avvicina all'immagine che vuoi creare. Naturalmente, puoi anche creare un'ombra da zero aggiungendo livelli.

2 Regola le ombre

Regola gli offset X/Y (posizione), la sfocatura, l'espansione, il colore e l'opacità. Sovrapponendo più ombre con "Aggiungi livello", puoi creare ombre più naturali e lussuose.

3 Copia il codice

Seleziona "CSS" o "Tailwind" dal pannello di output in base al tuo ambiente di sviluppo e premi il pulsante degli appunti per copiare il codice.

Proprietà

Sintassi e proprietà di box-shadow


box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

offset-x / offset-y: La posizione orizzontale e verticale dell'ombra. Valori positivi spostano l'ombra a destra/giù, valori negativi la spostano a sinistra/su.
blur-radius: La sfocatura dell'ombra. Maggiore è il valore, più ampia e sfumata diventerà l'ombra. Se 0, diventa un confine netto (ombra solida).
spread-radius: Espande o restringe la dimensione dell'ombra stessa. Valori positivi rendono l'ombra più grande dell'elemento, valori negativi la rendono più piccola.
inset (ombra interna): Quando è specificata questa parola chiave, l'ombra viene generata all'interno dell'elemento invece che all'esterno. Utilizzato per esprimere UI rientrate.

FAQ

Q. box-shadow influisce sulle prestazioni?

A.Le ombre grandi e sfocate e i livelli multipli sono costosi da disegnare, quindi il rendering potrebbe risultare lento sui dispositivi mobili. È necessaria particolare attenzione quando si anima il box-shadow.

Q. Qual è la differenza tra box-shadow e filter: drop-shadow?

A.box-shadow applica un’ombra al box (rettangolo) dell’elemento. D’altra parte, filter: drop-shadow() genera un’ombra in base alla forma opaca dell’elemento (come il contorno di un PNG trasparente).

Q. In quali casi si usa inset?

A.È usato per lo stato premuto dei pulsanti (effetto rientrato), per le ombre interne dei campi di testo, per disegnare luci nel Neumorfismo, ecc.

Q. Quali sono i vantaggi di sovrapporre più ombre?

A.Sovrapporre più livelli può esprimere una profondità più naturale e realistica rispetto a un’ombra singola sfocata. Ad esempio, impilare un’ombra vicina (piccola e scura) e un’ombra lontana (grande e chiara) è una tecnica comune.

Casi d’Uso

Card e Finestre Modali

Fa risaltare gli elementi dallo sfondo, comunicando visivamente all'utente che sono elementi cliccabili o contenuti importanti.

Stati hover/active dei pulsanti

Aumentando la sfocatura al passaggio del mouse o passando a `inset` al clic, puoi creare un pulsante interattivo realistico.

Design Neumorfismo

Posizionando un'ombra chiara e una scura in diagonale su un elemento dello stesso colore dello sfondo, crei una texture tridimensionale (in rilievo o incisa).