Generatore CSS Box Shadow
Progetta box shadow multi-layer visivamente e copia il CSS pronto per la produzione.
Cos'è
Il Generatore CSS Box Shadow è un editor visivo gratuito per creare la proprietà `box-shadow` perfetta. Invece di indovinare i valori di offset e raggio a mano, muovi i cursori e vedi il risultato in diretta. Puoi impilare più layer di ombra e alternare tra modalità normale e inset. Quando sei soddisfatto, un clic copia il CSS completo pronto da incollare nel tuo foglio di stile.
Come si usa
- La card di anteprima al centro mostra la tua ombra in tempo reale. Inizia regolando i cursori di offset orizzontale e verticale.
- Aumenta il cursore Blur per un'ombra morbida diffusa, o tienilo basso per un look dai bordi netti.
- Scegli un colore con il color picker e imposta l'opacità per miscelare l'ombra con lo sfondo.
- Attiva "Inset" per invertire l'ombra all'interno dell'elemento, creando un effetto pressato o incassato.
- Clicca "+ Aggiungi Layer" per impilare ombre aggiuntive. Ogni layer ha le proprie impostazioni. Al termine, clicca "Copia CSS".
Perché usarlo
Scrivere CSS box-shadow a mano è lento e soggetto a errori. Questo strumento offre un editor visivo in tempo reale per progettare ombre con sicurezza, incluse composizioni multi-layer avanzate. Il codice esportato è pulito e pronto all'uso.
Domande frequenti
Quanti layer di ombra posso aggiungere?
Puoi aggiungere fino a 5 layer indipendenti. Il CSS supporta nativamente più valori box-shadow come lista separata da virgole, che è esattamente ciò che questo strumento esporta.
Cosa fa il toggle "Inset"?
Le ombre inset appaiono all'interno dell'elemento anziché all'esterno. Sono perfette per creare effetti incassati o in rilievo — ad esempio un campo di input che sembra incavato nella pagina.
Posso esportare il risultato come immagine?
Sì. Clicca "Esporta PNG" per salvare uno screenshot della card di anteprima con la tua ombra applicata.
Questo strumento supporta anche text-shadow?
Questo strumento si concentra specificamente sulla proprietà CSS `box-shadow`. Per le ombre del testo, cerca un generatore dedicato di text-shadow.
Quali unità usa il CSS esportato?
Tutti i valori sono esportati in pixel (px). Se hai bisogno di unità relative (em, rem), puoi scalare manualmente i valori esportati.