Aggiungi Ombra all'Immagine

Lo strumento Aggiungi Ombra all'Immagine stacca qualsiasi foto dalla pagina con un'ombra morbida e credibile, interamente nel browser. Carica una foto, uno screenshot, un logo o un PNG ritagliato, trascina la fonte di luce per impostare l'angolo, poi regola sfocatura, espansione, opacità e colore. Su un PNG trasparente l'ombra è costruita dal canale alfa dell'immagine, così un prodotto o un adesivo proietta un'ombra con il proprio contorno invece di un rettangolo. Esporta un PNG con sfondo trasparente, un JPG su uno sfondo a tinta unita o a gradiente, oppure copia il codice CSS box-shadow corrispondente. Non viene caricato nulla: la tua immagine non lascia mai il dispositivo.

I tre numeri che fanno un'ombra: scostamento, sfocatura ed espansione

Quasi ogni ombra sbagliata nasce da uno di questi tre valori. Lo scostamento è quanto l'ombra viene spinta via dal soggetto: dice a chi guarda dov'è la luce e a che altezza fluttua l'oggetto. La sfocatura è quanto è morbido il bordo: una sfocatura piccola si legge come luce dura e diretta (sole, un flash), una sfocatura grande si legge come luce diffusa (un giorno nuvoloso, un softbox). L'espansione ingrandisce o riduce la forma dell'ombra prima di applicare la sfocatura, ed è così che ottieni un alone pesante o un'ombra leggermente rientrata sotto l'oggetto.

Come aggiungere un'ombra all'immagine

1. Carica la tua immagine: Trascina una foto sul riquadro di caricamento o tocca per sceglierne una. Non viene caricato nulla: il file viene letto direttamente nel browser.
2. Posiziona la luce: Trascina il sole sul riquadro Fonte di luce. L'ombra cade dal lato opposto e, trascinando più lontano dal centro, la allontani. Funzionano anche i tasti freccia.
3. Dai forma all'ombra: Scegli un tipo — Proiettata, A strati, Lunga o Bagliore — poi imposta Sfocatura, Espansione, Opacità e il colore dell'ombra.
4. Scegli uno sfondo: Lascialo Trasparente per un PNG, oppure riempilo con un colore a tinta unita o un gradiente. Lo Spazio extra aggiunge respiro intorno al risultato.
5. Scarica o copia: Salva un PNG o JPG a dimensione originale, a metà o a 2×, oppure copia il CSS generato per riutilizzare la stessa ombra su un elemento web.

Ombre che seguono il soggetto, non il riquadro

La maggior parte degli strumenti online per l'ombra disegna un rettangolo dietro il file. Va bene per una foto, ma è sbagliato per un prodotto ritagliato, un logo o un adesivo: una bottiglia tonda non dovrebbe proiettare un'ombra quadrata. Questo strumento legge il canale alfa dell'immagine e costruisce l'ombra dalla sagoma reale, così le aree trasparenti restano senza ombra. Carica un PNG trasparente e vedrai una nota verde che lo conferma. Per una foto opaca normale la sagoma è semplicemente il rettangolo dell'immagine — arrotondato prima, se imposti un raggio degli angoli.

Quale tipo di ombra dovresti usare?

Perché percentuali, non pixel

Ogni cursore qui è una percentuale del lato più corto dell'immagine. Una sfocatura del 9% ha lo stesso aspetto su una miniatura da 400 px e su una foto da 4000 px, così un preset che ti piace continua a funzionare quando cambi con un'immagine più grande, senza ricalcolare. Lo strumento mostra comunque il valore equivalente in pixel accanto al cursore della sfocatura e nel pannello CSS, per quando ti servono numeri reali.

Consigli per un'ombra credibile

La mia immagine è privata?

Sì. A differenza degli editor online che caricano la foto su un server per elaborarla, questo strumento funziona interamente nel browser web con l'HTML5 canvas. La tua immagine non lascia mai il dispositivo, non viene memorizzato nulla e non c'è un account da creare. Chiudi la scheda e l'immagine sparisce.

Domande frequenti

Questo strumento per l'ombra è gratuito e privato?

Sì. È completamente gratuito e funziona interamente nel browser web con l'HTML5 canvas, quindi la tua immagine non viene mai caricata su alcun server e resta sul tuo dispositivo. L'immagine scaricata non ha filigrana e non c'è da registrarsi.

L'ombra segue la forma di un PNG trasparente?

Sì. L'ombra è costruita dal canale alfa dell'immagine, così un prodotto ritagliato, un logo o un adesivo proietta un'ombra con il proprio contorno anziché un rettangolo. Se l'immagine è una foto opaca normale, la sagoma è il rettangolo della foto, eventualmente con angoli arrotondati.

Come mantengo lo sfondo trasparente?

Imposta lo sfondo su Trasparente e scarica un PNG. Vengono disegnati solo l'ombra e il soggetto, così poi puoi posare il risultato su qualsiasi colore. Il JPG non può memorizzare la trasparenza, quindi un'esportazione JPG riempie lo sfondo di bianco.

Qual è la differenza tra sfocatura ed espansione?

La sfocatura ammorbidisce il bordo dell'ombra, facendola svanire su una distanza. L'espansione ingrandisce o riduce la forma stessa dell'ombra prima di sfocarla, così una grande espansione con poca sfocatura dà un alone netto, mentre una piccola espansione con molta sfocatura dà una nuvola morbida.

Perché la mia ombra è tagliata sul bordo dell'immagine?

Un'ombra ha bisogno di spazio fuori dalla foto. Questo strumento aggiunge automaticamente spazio in base a scostamento, sfocatura ed espansione, e puoi aggiungerne altro con il cursore Spazio extra. Se esporti un JPG su uno sfondo colorato, è su quello spazio che atterra l'ombra.

Posso ottenere il CSS della stessa ombra?

Sì. Il pannello CSS mostra una regola box-shadow e filter drop-shadow pronta da incollare che corrisponde alle impostazioni attuali, in pixel misurati sulla tua immagine. Copiala per dare a un elemento web lo stesso look senza esportare un file.

Risorse aggiuntive

• CSS box-shadow — MDN
• filter: drop-shadow() — MDN
• Composizione alfa — Wikipedia