Glas- und Rahmen-Effekte
Milchglas, Verlaufsrahmen und Leuchten für Karten und Hero-Bereiche. Echtes CSS mit Vorschau, kopierbar als CSS, Tailwind oder HTML.
Im Editor öffnenCSS-Effekte und Layouts
CSS-Clip-path-Generator (Formen, Polygone, Masken)
Schneide Bilder und Abschnitte in Vielecke, Sterne, Blobs, Wellen, Schrägen oder Sprechblasen. Kopiere CSS clip-path, ein SVG-clipPath oder Tailwind.
Generator öffnenLäuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.
Mit einem Preset starten
Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.
Worum geht’s?
Die CSS-Eigenschaft clip-path schneidet ein Element in eine Form. Sichtbar bleibt nur der Teil innerhalb der Form, zum Beispiel ein Foto als Sechseck oder ein Hero-Bereich mit schräger Unterkante. Der Generator zeichnet die Form für dich und schreibt den Code.
Wofür du es brauchst
Fotos und Avatare
Teamfotos als Sechsecke, Blobs oder Kreise wirken verspielter als gewöhnliche Rechtecke.
Hero-Bereiche
Eine schräge oder wellige Unterkante macht den Übergang zum Inhalt lebendiger.
Badges und Hinweise
Sterne, Pfeile und Sprechblasen machen aus einfachen Boxen auffällige Etiketten.
So geht’s
Wähle eine Form und passe Ecken, Tiefe, Seite oder Variation an. Lade dein eigenes Bild, um die Wirkung zu sehen. Kopiere dann das CSS, das SVG-clipPath für weiche Kurven oder die Tailwind-Klasse. Die Bildexporte zeigen das geschnittene Element als SVG, PNG oder WebP.
Clip-path-Generator jetzt ausprobierenTipps
- Das CSS rechnet in Prozent. Die Form folgt dem Element darum in jeder Grösse und auf jedem Bildschirm.
- Kurven bestehen im CSS aus vielen Punkten. Für sehr grosse, runde Formen gibt das SVG-clipPath glattere Kanten.
- clip-path schneidet auch Schatten weg. Setze filter: drop-shadow() auf ein umgebendes Element, wenn die Form einen Schatten braucht.
Häufige Fragen
- Welche Browser unterstützen clip-path?
- Alle aktuellen Browser unterstützen clip-path mit polygon(), ellipse() und url() für SVG-Clip-Pfade.
- Reagiert der weggeschnittene Bereich noch auf Klicks?
- Nein. Klicks und Hover zählen nur innerhalb der sichtbaren Form. Knöpfe und Links bleiben dadurch genau.
- Kann ich die Form animieren?
- Ja, solange beide Polygone gleich viele Punkte haben. Dann blendet ein CSS-Übergang weich von einer Form zur anderen.
- Wird mein Bild hochgeladen?
- Nein. Dein Bild bleibt in deinem Browser. Es wird auf keinem Server gespeichert und reist nie in einem Teilen-Link mit.
Passende Generatoren
Alle Generatoren in CSS-Effekte und Layouts
Bento-Grid
Ungleich grosse, abgerundete Kacheln in einem Raster, ohne Lücken. Für Feature-Sektionen, Portfolios und Social-Grafiken, als CSS Grid, Tailwind oder Bild.
Im Editor öffnen
CSS-Schatten-Generator
Weiche, mehrschichtige Schatten für Karten und Buttons. Vorschau mit echtem CSS, Export als box-shadow, Tailwind oder drop-shadow.
Im Editor öffnen
Animierter Farbverlauf
Wandernde, drehende und farbwechselnde Verläufe und schwebende Flecken als reines CSS. CSS, Tailwind oder HTML kopieren, PNG und GIF exportieren.
Im Editor öffnen
Fliessende Schriftskala
Schriftgrössen, die mit der Bildschirmbreite wachsen: eine typografische Skala als CSS clamp(), mit CSS-Variablen und Tailwind-Theme zum Kopieren.
Im Editor öffnen
Abschnittstrenner-Generator
Wellen, Bögen, Schrägen, Zacken und mehr als Übergang zwischen zwei Website-Abschnitten. Ein SVG, das sich jeder Breite anpasst, mit HTML und CSS zum Kopieren.
Im Editor öffnen