So nutzt du: CSS Bildränder weichzeichnen
- Die Vorschau startet mit Alle Ränder ausblenden; ziehe Größe des Verlaufs, um den weichen Rand breiter oder schmaler zu machen.
- Wechsle den Effekt auf nur eine Seite (zum Beispiel die Unterseite eines Hero-Bildes) oder auf oben und unten.
- Probiere es mit deinem eigenen Foto über Mein Bild verwenden aus.
- Kopiere das CSS auf das Bild oder seinen Container.
Warum Ränder mit einer Maske ausblenden?
Eine Gradient-Maske blendet das Bild selbst in das ein, was dahinter liegt — einen Seitenhintergrund, einen Verlauf oder ein anderes Bild — statt ein farbiges Overlay darüberzulegen. Sie funktioniert auf jedem Hintergrund, in hellen und dunklen Themes, und verändert deine Bilddateien nicht.
img.soft {
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent),
linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}Zwei Verläufe — einer vertikal, einer horizontal — werden mit mask-composite: intersect kombiniert, sodass alle vier Seiten ausblenden. Für runde Vignetten-Effekte nutze den CSS Vignette Generator, für Formen den Image Shape Mask.
Auch gesucht als: bildränder ausblenden css, css ränder weichzeichnen, soft edges css bild, bild ausblenden css, css bild fade, bildrand verlauf css, feather image css, bild transparent ausblenden css.
Passende Tools zu: CSS Bildränder weichzeichnen
- CSS-Mask-Generator — Lass Bilder und Bereiche sanft ausblenden, statt hart abzuschneiden: eine Kante ausblenden, oben und unten, alle vier Kanten, eine radiale Vignette oder einen Spotlight-Effekt.
- CSS Verlauf Generator — Gestalte einen Verlauf visuell: Farbstopps ziehen, Winkel oder Typ ändern, mit einer Vorlage starten.
- CSS Clip-path Generator — Schneide Bilder und Elemente in beliebige Formen: Wähle eine von 15 Startformen — Dreieck, Sechseck, Stern, Pfeil, Chevron, Sprechblase, Kreis, Ellipse, abgerundetes Inset … — und ziehe die Punkte über ein Beispielbild oder dein eigenes.
- CSS-Filter-Generator — Passe Blur, Helligkeit, Kontrast, Sättigung, Farbton, Graustufen, Sepia, Invertieren und Schlagschatten an einem Beispiel- oder eigenen Bild an und kopiere das CSS für filter.
Häufige Fragen
Wie blende ich die Ränder eines Bildes mit CSS aus?
Verwende eine Gradient-Maske: mask-image: linear-gradient(...) von transparent zu #000 und zurück. Für alle vier Kanten kombinierst du einen vertikalen und einen horizontalen Verlauf mit mask-composite: intersect, wie dieser Generator es macht.
Wie blende ich nur die Unterseite eines Bildes aus?
Wähle „Eine Kante ausblenden“ mit der Richtung Unten: mask-image: linear-gradient(to bottom, #000 60%, transparent).
Funktioniert das auch bei Hintergrundbildern?
Ja — lege die Maske auf das Element mit dem background-image; das gesamte Element, inklusive Hintergrund, wird ausgeblendet.
Kann ich CSS Bildränder weichzeichnen als Web-App installieren und offline nutzen?
Ja. CSS Bildränder weichzeichnen ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.