🌫️

Generatore box shadow CSS

Crea valori CSS box-shadow in modo visuale. Regola offset, sfocatura, espansione, colore e opacità con anteprima in tempo reale. Sovrapponi più livelli e copia il CSS finale.

Strumenti di generazione Funziona localmente Nessun dato inviato
cssbox-shadowgeneratoredesign
Livelli
Offset X4px
Offset Y4px
Sfocatura8px
Diffusione0px
%
Inset

Che cos'è il Generatore box shadow CSS?

Il Generatore box shadow CSS consente di creare visivamente valori box-shadow e copiare subito il CSS. Regola offset, sfocatura, diffusione, colore e opacità con anteprima live.

Come usare il Generatore box shadow CSS

  1. Regola i cursori Offset X/Y, Sfocatura e Diffusione.
  2. Scegli un colore per l'ombra e imposta l'opacità.
  3. Attiva Inset per un effetto ombra interna.
  4. Aggiungi altri livelli per ombre complesse.
  5. Copia il CSS e incollalo nel tuo progetto.

Strumenti correlati

🌈
Generatore gradiente CSS
Crea gradienti CSS lineari e radiali
🖌️
Selettore colore
Scegli e converti i colori tra formati
🎨
Formattatore CSS
Formatta e abbellisci il codice CSS
Scopri di più▾
Parametri box-shadow
  • Offset X/Y —sposta l'ombra orizzontalmente e verticalmente
  • Sfocatura —quanto è morbido/sfocato il bordo dell'ombra
  • Diffusione —espande o contrae le dimensioni dell'ombra
  • Inset —visualizza l'ombra all'interno dell'elemento
Domande frequenti
Posso aggiungere più ombre?

Sì. Fai clic su 'Aggiungi livello' per sovrapporre più valori box-shadow, combinati con virgole nel CSS generato.

Come uso il CSS generato?

Fai clic su 'Copia CSS' e incolla la proprietà box-shadow direttamente nel tuo file CSS o nel blocco di stile.