So nutzt du: Bild-Formmaske
- Wähle eine Form aus. Es sind dieselben wie im Clip-path-Generator, zusätzlich gibt es ein Herz.
- Erhöhe Weichzeichnung für eine weiche Kante oder lass den Wert bei 0 für einen scharfen Schnitt.
- Ändere die Größe, um die Form innerhalb des Elements zu verkleinern, und probiere Eigenes Bild verwenden aus.
- Kopiere das CSS. Die Form ist ein Inline-SVG, daher wird keine zusätzliche Datei benötigt.
Formmasken vs. clip-path
clip-path schneidet eine scharfe Form aus und ist die einfachste Option, wenn du harte Kanten brauchst. Eine Formmaske verwendet ein SVG als mask-image. Sie kann weiche, verlaufende Kanten haben, lässt sich mit mask-size skalieren und mit mask-position positionieren und funktioniert mit jeder SVG-Form, sogar mit deinem eigenen Logo (wähle „Eigenes Bild oder SVG als Maske“).
Für Formen mit harten Kanten und verschiebbaren Punkten eignet sich der Clip-path Generator, für organische Formen der SVG Blob Generator.
Auch gesucht als: bild form maske css, css bild in form, mask image form css, herz form bild css, stern form bild, sechseck bild css, formausschnitt css, css mask svg form.
Passende Tools zu: Bild-Formmaske
- 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 Bildränder weichzeichnen — Gib Fotos und Hero-Bildern mit einer einzigen CSS-Regel weiche, ausgeblendete Ränder — ganz ohne Bildbearbeitung.
- Border-Radius Generator — Runde die Ecken beliebiger Boxen ab: Zieh einen Regler für alle Ecken oder stell jede Ecke einzeln ein, wechsle zu elliptischen Ecken für Blob- und Blattformen und kopiere das kürzeste gültige border-radius-CSS.
- CSS Dreieck Generator — Erstelle ein reines CSS-Dreieck für einen Tooltip-Pfeil, ein Dropdown-Caret oder eine Sprechblase: Wähle eine von 8 Richtungen, Breite, Höhe und Farbe und kopiere entweder den klassischen Border-Trick oder die einfachere clip-path-Variante.
Häufige Fragen
Wie setze ich ein Bild in eine Herz- oder Sternform?
Wähle hier die Form aus und kopiere das CSS. Es setzt ein Inline-SVG der Form als mask-image auf dein Bild, sodass nur das Innere der Form sichtbar ist.
Kann die Form weiche Kanten haben?
Ja, erhöhe einfach den Wert bei Weichzeichnung. Die SVG-Form wird weichgezeichnet, sodass das Bild am Rand ausblendet. clip-path kann das nicht, dort entstehen immer harte Kanten.
Kann ich meine eigene Form oder mein eigenes Logo verwenden?
Ja, wähle „Eigenes Bild oder SVG als Maske“ und lade ein PNG mit Transparenz oder ein SVG hoch.
Kann ich Bild-Formmaske als Web-App installieren und offline nutzen?
Ja. Bild-Formmaske 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.