Border Radius Generator
Kostenloser Online Border-Radius-Generator. Ziehen Sie 8 Griffe oder wählen Sie eine Blob-Vorlage, um organische CSS-Formen zu erstellen und den Code sofort zu kopieren.
Was bedeutet die 8-Werte-Syntax von border-radius?
In der Syntax border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 sind die Werte vor dem Schrägstrich die horizontalen Radien (oben links, oben rechts, unten rechts, unten links) und die danach die vertikalen Radien. Unterschiedliche Werte in jeder Richtung erzeugen die organischen Blob-Formen.
Wie verwende ich das generierte CSS?
Kopieren Sie die border-radius-Zeile und fügen Sie sie in eine beliebige CSS-Regel des gewünschten Elements ein, z. B. .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Das funktioniert in reinem CSS, Sass, Tailwind-Arbitrary-Values und Inline-Styles.
Wo werden Blob-Formen eingesetzt?
Blob-Formen sind beliebt für Hero-Illustrationen, Avatare, Profilbilder, Feature-Karten, Buttons und dekorative Hintergründe im modernen Web- und App-Design.
Funktionieren abgerundete Ecken in allen Browsern?
Ja. border-radius wird von allen modernen Browsern unterstützt, darunter Chrome, Firefox, Safari, Edge und mobile Browser, ganz ohne Herstellerpräfixe.
Kann ich die Blob-Form animieren?
Ja. border-radius ist animierbar, daher ermöglicht eine CSS-Transition ein weiches Morphen zwischen Formen, z. B. .blob { transition: border-radius .8s ease; }.
Was ist der Unterschied zwischen der 4-Werte- und der 8-Werte-Syntax?
Die 4-Werte-Form setzt für jede Ecke denselben horizontalen und vertikalen Radius, was für Pills oder Kreise reicht. Die 8-Werte-Form trennt horizontale und vertikale Radien und ermöglicht so asymmetrische, organische Formen.
Wie erstelle ich einen perfekten Kreis?
Setzen Sie bei einem quadratischen Element alle acht Werte auf 50 % oder verwenden Sie einfach border-radius: 50 %. Sie können auch von einer kreisähnlichen Vorlage ausgehen und diese anpassen.
Werden meine Daten hochgeladen?
Nein. Der Generator läuft vollständig in Ihrem Browser mit reinem CSS und JavaScript. Nichts, was Sie ziehen, eingeben oder kopieren, wird an einen Server gesendet.
Kann ich das bei nicht-quadratischen Elementen verwenden?
Ja, aber Prozentwerte beziehen sich auf die Elementabmessungen. Ein Rechteck erhält dadurch elliptische Ecken und sieht anders aus als die quadratische Vorschau. Nutzen Sie die generierten Werte als Startpunkt und passen Sie sie an.
So verwenden Sie Border Radius Generator
Der achtwertige border-radius erzeugt organische Blob-Formen mit elliptischen Ecken, die ein gewöhnliches abgerundetes Rechteck nicht erreicht. Formen Sie den Blob mit den Griffen und kopieren Sie das fertige CSS — alles wird live in Ihrem Browser gerendert.
- Greifen Sie einen der acht Griffe an den Kanten der Form — die an Ober- und Unterkante stellen die horizontalen Radien ein, die an den Seiten die vertikalen.
- Klicken Sie auf eines der sechs Vorlagen-Quadrate, um von einem gestalteten Blob auszugehen, und verfeinern Sie dann die Werte in den Eingabefeldern Horizontale Radien und Vertikale Radien (je eines pro Ecke, 0–100 %).
- Klicken Sie auf Zufällig, um mit einem Klick eine neue organische Form zu würfeln, oder auf Zurücksetzen, um zu Standardform und -farben zurückzukehren.
- Wählen Sie eine Formfarbe und einen Hintergrund, um den Blob gegen Ihre Zielpalette zu prüfen — beides aktualisiert sich sofort.
- Klicken Sie auf CSS kopieren, um die live angezeigte border-radius-Deklaration aus der Leiste unten zu übernehmen, und fügen Sie sie einem beliebigen Element hinzu.
Wenden Sie den Code auf ein quadratisches Element mit overflow: hidden an, um den klassischen Blob-Look zu erhalten; Prozentwerte halten die Kurve in jeder Größe flüssig, und der Schrägstrich trennt horizontale von vertikalen Radien.
Verwandte Tools
- CSS Border Radius Generator Visueller CSS Border Radius Generator. Passen Sie jede Ecke unabhängig an mit Echtzeitvorschau und kopieren Sie den CSS-Code sofort.
- CSS-Gradient-Generator Erstellen Sie visuell atemberaubende CSS-Gradienten. Generieren Sie lineare, radiale und konische Gradienten mit mehreren Farbstops, Winkeln und Positionen. Kopieren Sie produktionsreifen CSS-Code sofort.
- CSS Box Shadow Generator Kostenloser Online-CSS-Box-Shadow-Generator. Erstellen Sie visuell schöne Schatten mit einstellbarem Versatz, Unschärfe, Ausbreitung, Farbe und Inset. Live-Vorschau und sofortiges Code-Kopieren.
- Farbpaletten-Generator Erstellen Sie sofort schöne, harmonische Farbpaletten mit unserem kostenlosen Online-Generator. Unterstützt monochromatische, analoge, komplementäre, triadische, split-komplementäre und tetradische Modi. Passen Sie Farben mit HSL-Reglern an, sperren Sie Favoriten und exportieren Sie als CSS, Tailwind, JSON oder SVG. 100% browserbasiert, Ihre Daten verlassen nie Ihr Gerät.
- Farbkonverter Kostenloser Online-Farbkonverter. Konvertieren Sie HEX, RGB, HSL, HSV Formate sofort mit visueller Farbauswahl. 100% privat, läuft in Ihrem Browser.
- CSS Easing Generator Kostenloser Online-CSS-Easing-Generator. Ziehen Sie die cubic-bezier-Kontrollpunkte auf einer interaktiven Kurve, wählen Sie aus 18 Vorlagen, sehen Sie eine Ball-Loop-Animation und kopieren Sie die Timing-Funktion sofort.
- CSS Text-Shadow-Generator Kostenloser Online-Text-Shadow-Generator. Stapeln Sie mehrere Schattenebenen mit Versatz, Unschärfe, Farbe und Deckkraft, testen Sie Vorlagen wie Neon, 3D oder Retro und kopieren Sie das CSS sofort.
- CSS Clip-Path Generator Kostenloser Online-CSS-Clip-Path-Generator. Gestalten Sie Polygon-, Kreis-, Ellipsen- und Inset-Formen mit verschiebbaren Punkten, Live-Vorschau und Codekopieren mit einem Klick.