Ombra Scatola
Progetta ombre CSS box-shadow con controlli visivi per offset, sfocatura, espansione e colore. Copia il codice finale con un clic.
Funzionalita principali
- Controlli intuitivi di offset orizzontale e verticale
- Slider per raggio di sfocatura e diffusione
- Supporto per ombra sia interna (inset) sia esterna
- Copia del codice CSS completo con tutta la formattazione necessaria
Guide
Il CSS box-shadow è una di quelle proprietà che sembra semplice nella documentazione ma diventa complicata nel momento in cui provi a creare qualcosa di specifico. Quanto blur lo rende naturale? Quale valore di spread dà un effetto di bordo stretto rispetto a un bagliore morbido? L'ombra deve andare verso l'interno o l'esterno? Ritoccare numeri alla cieca nel codice e aggiornare la pagina di continuo non è il divertimento di nessuno. Il generatore di box shadow gratuito di WebRecast ti dà controlli visivi per ogni parametro. Fai scorrere gli offset orizzontali e verticali per posizionare l'ombra. Regola il blur radius per la morbidezza e lo spread per la dimensione. Scegli qualsiasi colore per l'ombra, imposta la sua opacità e passa tra ombre esterne e inset. Vedi il risultato aggiornarsi dal vivo mentre trascini ogni cursore, rendendo facile trovare esattamente l'effetto che vuoi. Quando sei soddisfatto, copia il codice CSS completo - formattato correttamente e pronto da incollare nel tuo foglio di stile. Lo strumento supporta anche la sovrapposizione di più ombre, che è il modo per creare quegli effetti di profondità ricchi e realistici che vedi nei design moderni delle card. Se hai usato il box shadow tool di CSSmatic, Box-Shadow.dev o Neumorphism.io, conosci il concetto. Questo generatore mette tutti i controlli in un'interfaccia pulita. Un consiglio pratico: per gli elementi card, usa un'ombra sottile con circa 10-20px di blur, spread basso e un nero o grigio semi-trasparente. Solleva la card dalla pagina senza risultare drammatico. Per i bottoni, un'ombra più piccola con 4-8px di blur crea una bella sensazione di cliccabilità. Questo strumento box shadow gratuito gira nel browser senza nulla da installare. Progetta la tua ombra, copia il CSS, incollalo nel progetto. Visuale, veloce e totalmente gratuito.
Domande frequenti
Posso sovrapporre più ombre?
Sì! Ti permetto di definire più livelli di ombra e li formattiamo come un'unica stringa CSS.
Funziona anche per text-shadow?
Questo strumento si concentra su box-shadow. Puoi applicare valori simili a text-shadow nel tuo CSS.
