Schlagschatten zum Bild hinzufügen

Das Tool Schlagschatten zum Bild hinzufügen hebt jedes Bild mit einem weichen, glaubwürdigen Schatten von der Seite — vollständig in Ihrem Browser. Laden Sie ein Foto, einen Screenshot, ein Logo oder ein freigestelltes PNG hoch, ziehen Sie die Lichtquelle, um den Winkel festzulegen, und stellen Sie dann Unschärfe, Ausbreitung, Deckkraft und Farbe ein. Bei einem transparenten PNG wird der Schatten aus dem Alpha-Kanal des Bildes aufgebaut, sodass ein Produkt oder Sticker einen Schatten in der eigenen Kontur statt als Rechteck wirft. Exportieren Sie ein PNG mit transparentem Hintergrund, ein JPG auf einem einfarbigen oder Verlaufshintergrund oder kopieren Sie den passenden CSS-box-shadow-Code. Es wird nichts hochgeladen — Ihr Bild verlässt Ihr Gerät nie.

Die drei Zahlen, die einen Schatten ausmachen: Versatz, Unschärfe und Ausbreitung

Fast jeder schlechte Schatten entsteht, weil eine dieser drei Größen nicht stimmt. Der Versatz ist, wie weit der Schatten vom Motiv weggeschoben wird — er zeigt, wo das Licht sitzt und wie hoch das Objekt schwebt. Die Unschärfe bestimmt, wie weich die Kante ist: eine kleine Unschärfe wirkt wie hartes, direktes Licht (Sonne, Blitz), eine große Unschärfe wie diffuses Licht (bewölkter Tag, Softbox). Die Ausbreitung vergrößert oder verkleinert die Schattenform, bevor die Unschärfe angewendet wird — so entsteht ein kräftiger Halo oder ein Schatten, der leicht unter das Objekt gezogen ist.

So fügen Sie Ihrem Bild einen Schlagschatten hinzu

1. Bild hochladen: Ziehen Sie ein Bild auf das Upload-Feld oder tippen Sie, um eines zu wählen. Es wird nichts hochgeladen — die Datei wird direkt in Ihrem Browser gelesen.
2. Licht platzieren: Ziehen Sie die Sonne auf dem Pad Lichtquelle. Der Schatten fällt auf die gegenüberliegende Seite, und weiter von der Mitte weg ziehen schiebt ihn weiter fort. Auch die Pfeiltasten funktionieren.
3. Schatten formen: Wählen Sie einen Typ — Schlag, Mehrlagig, Lang oder Leuchten — und stellen Sie dann Unschärfe, Ausbreitung, Deckkraft und die Schattenfarbe ein.
4. Hintergrund wählen: Lassen Sie ihn für ein PNG Transparent oder füllen Sie ihn mit einer Vollfarbe oder einem Verlauf. Extra-Rand gibt dem Ergebnis Atemraum.
5. Herunterladen oder kopieren: Speichern Sie ein PNG oder JPG in Original-, halber oder 2×-Größe — oder kopieren Sie das erzeugte CSS, um denselben Schatten auf einem Web-Element wiederzuverwenden.

Schatten, die dem Motiv folgen, nicht der Box

Die meisten Online-Schatten-Tools zeichnen ein Rechteck hinter Ihre Datei. Das reicht für ein Foto, ist aber falsch für eine freigestellte Produktaufnahme, ein Logo oder einen Sticker: eine runde Flasche sollte keinen quadratischen Schatten werfen. Dieses Tool liest den Alpha-Kanal Ihres Bildes und baut den Schatten aus der tatsächlichen Silhouette, sodass transparente Bereiche schattenfrei bleiben. Laden Sie ein transparentes PNG hoch und Sie sehen einen grünen Hinweis zur Bestätigung. Bei einem gewöhnlichen undurchsichtigen Foto ist die Silhouette einfach das Bildrechteck — zuerst abgerundet, wenn Sie einen Eckenradius setzen.

Welchen Schattentyp sollten Sie verwenden?

Warum Prozente und nicht Pixel

Jeder Regler hier ist ein Prozentsatz der kürzeren Bildseite. Eine 9%-Unschärfe sieht auf einem 400-px-Thumbnail genauso aus wie auf einem 4000-px-Foto, sodass eine Voreinstellung, die Ihnen gefällt, auch bei einem größeren Bild funktioniert — ohne Nachrechnen. Das Tool zeigt trotzdem den entsprechenden Pixelwert neben dem Unschärferegler und im CSS-Feld, wenn Sie echte Zahlen brauchen.

Tipps für einen glaubwürdigen Schatten

Ist mein Bild privat?

Ja. Anders als Online-Editoren, die Ihr Bild zur Verarbeitung auf einen Server hochladen, läuft dieses Tool vollständig in Ihrem Webbrowser mit dem HTML5-Canvas. Ihr Bild verlässt Ihr Gerät nie, es wird nichts gespeichert, und es gibt kein Konto anzulegen. Schließen Sie den Tab und das Bild ist weg.

Häufig gestellte Fragen

Ist dieses Schlagschatten-Tool kostenlos und privat?

Ja. Es ist vollständig kostenlos und läuft komplett in Ihrem Webbrowser mit dem HTML5-Canvas, sodass Ihr Bild nie auf einen Server hochgeladen wird und auf Ihrem eigenen Gerät bleibt. Das heruntergeladene Bild hat kein Wasserzeichen und es gibt keine Anmeldung.

Folgt der Schatten der Form eines transparenten PNG?

Ja. Der Schatten wird aus dem Alpha-Kanal des Bildes aufgebaut, sodass ein freigestelltes Produkt, Logo oder Sticker einen Schatten in der eigenen Kontur wirft und nicht als Rechteck. Ist das Bild ein normales undurchsichtiges Foto, ist die Silhouette das Foto-Rechteck, optional mit abgerundeten Ecken.

Wie behalte ich den transparenten Hintergrund?

Stellen Sie den Hintergrund auf Transparent und laden Sie ein PNG herunter. Nur der Schatten und das Motiv werden gezeichnet, sodass Sie das Ergebnis später auf jede Farbe legen können. JPG kann keine Transparenz speichern, daher füllt ein JPG-Export den Hintergrund weiß.

Was ist der Unterschied zwischen Unschärfe und Ausbreitung?

Unschärfe weicht die Kante des Schattens auf und lässt sie über eine Distanz auslaufen. Ausbreitung vergrößert oder verkleinert die Schattenform selbst, bevor sie unscharf gemacht wird. Eine große Ausbreitung mit kleiner Unschärfe ergibt einen harten Halo, eine kleine Ausbreitung mit großer Unschärfe eine weiche Wolke.

Warum wird mein Schatten am Bildrand abgeschnitten?

Ein Schatten braucht Platz außerhalb des Bildes. Dieses Tool fügt automatisch Rand aus Versatz, Unschärfe und Ausbreitung hinzu, und Sie können mit dem Extra-Rand-Regler noch mehr hinzufügen. Wenn Sie ein JPG auf einen farbigen Hintergrund exportieren, landet der Schatten auf genau diesem Rand.

Kann ich das CSS für denselben Schatten bekommen?

Ja. Das CSS-Feld zeigt eine fertige box-shadow- und filter-drop-shadow-Regel, die zu den aktuellen Einstellungen passt, in Pixeln gemessen an Ihrem Bild. Kopieren Sie sie, um einem Web-Element denselben Look zu geben, ohne eine Datei zu exportieren.

Weitere Ressourcen

• CSS box-shadow — MDN
• filter: drop-shadow() — MDN
• Alpha compositing — Wikipedia