⬭ CSS Border-Radius Generator
Pixel-genaue CSS border-radius-Werte in Sekunden erzeugen — kein Konto, keine Installation, nichts wird an einen Server gesendet. Schieberegler pro Ecke ziehen, Blob-Zufall für organische Formen nutzen und das fertige CSS direkt in dein Stylesheet einfügen.
Set independent horizontal (x) and vertical (y) radii per corner.
Über
Dieser CSS Border-Radius Generator bietet drei Bearbeitungsmodi in einem kostenlosen, offlinefähigen Tool: Der Einfach-Modus passt alle vier Ecken gleichzeitig an, der Ecken-Modus erlaubt die unabhängige Feinabstimmung jeder Ecke, und der Elliptisch-Modus schaltet separate horizontale und vertikale Radien pro Ecke frei — die volle Stärke der CSS border-radius-Kurzschreibweise. Ein Live-SVG-Diagramm spiegelt jede Änderung in Echtzeit, und der Blob-Zufall-Button nutzt einen kryptografisch zufälligen Algorithmus, um die organischen Blob-Formen zu erzeugen, die im modernen UI-Design so beliebt sind. Da alles im Browser läuft, bleiben deine Designs privat und das Tool funktioniert auch ohne Internetverbindung.
Verwendung
- Wähle einen Modus — Einfach (alle Ecken), Ecken oder Elliptisch (getrennte x/y-Radien) — über die Schaltflächen oben im Steuerfeld.
- Schiebe die Regler oder tippe Werte direkt in die Zahlenfelder, um den Radius jeder Ecke festzulegen. Vorschau und SVG-Diagramm aktualisieren sich sofort.
- Klicke auf Blob-Zufall, um mithilfe unabhängiger elliptischer Radien eine zufällige organische Blob-Form zu erzeugen — perfekt für dekorative UI-Elemente und Hero-Hintergründe.
- Überprüfe die generierte CSS-Kurzschreibweise im Ausgabefeld — das Tool wendet automatisch die kürzestmögliche gültige Syntax an (z. B. werden gleiche Werte zusammengefasst).
- Klicke auf CSS kopieren, um den Code in die Zwischenablage zu kopieren, und füge ihn direkt in dein Stylesheet oder Design-Tool ein.
Häufige Fragen
- Ist dieser CSS Border-Radius Generator völlig kostenlos?
- Ja, 100 % kostenlos — kein Konto, kein Abo, keine versteckten Limits. Seite öffnen und sofort loslegen.
- Funktioniert das Tool offline oder ohne Internetverbindung?
- Ja. Das Tool läuft vollständig im Browser ohne Serveraufrufe. Sobald die Seite geladen ist, kannst du die Internetverbindung trennen und es funktioniert weiter. Deine letzten Einstellungen werden zudem lokal im Browser gespeichert.
- Bleiben meine Designdaten privat?
- Vollständig. Kein Datum verlässt jemals deinen Browser — kein Upload, keine Analyse deiner Eingaben, keine Serverspeicherung. Alles bleibt auf deinem Gerät.
- Was bewirkt der Elliptisch-Modus?
- Der Elliptisch-Modus erlaubt es, für jede der vier Ecken separate horizontale (x) und vertikale (y) Radien festzulegen. Das ergibt die vollständige CSS border-radius-Kurzschreibweise mit Schrägstrich-Notation — zum Beispiel border-radius: 40% 20% / 20% 40%. Damit lassen sich asymmetrische und eiförmige Formen erzeugen, die Einfach- und Ecken-Modus nicht erreichen.
- Wofür ist der Blob-Zufall-Button?
- Blob-Zufall verwendet einen kryptografisch zufälligen Algorithmus, um durch zufällige elliptische Radien für alle acht Ecken-Achsen-Kombinationen eine organische, unregelmäßige Form zu erzeugen. Perfekt für die fließenden Blob-Formen, die auf modernen Landing-Pages, Avataren und dekorativen Hintergründen weit verbreitet sind — mit einem einzigen Klick.