Randradiusgenerator
Generieren Sie CSS-Randradiuswerte visuell mit unserem kostenlosen Randradiusgenerator. Ziehen Sie acht unabhängige Eckgriffe, um Kreise, Pillen, Kleckse und benutzerdefinierte abgerundete Formen zu erstellen – und erhalten Sie sofort eine kopierfertige CSS-Kurz- und Langschriftausgabe. Die gesamte Verarbeitung läuft lokal in Ihrem Browser. Keine Anmeldung erforderlich.
Drag the 8 sliders to set independent horizontal and vertical radii for each corner. Use presets for common shapes or link all corners to edit them together. The CSS output updates in real time - copy the shorthand or longhand CSS with one click.
border-radius: 30% 70% 30% 70% / 30% 30% 70% 70%;
border-top-left-radius: 30% 30%; border-top-right-radius: 70% 30%; border-bottom-right-radius: 30% 70%; border-bottom-left-radius: 70% 70%;
.element {
border-radius: 30% 70% 30% 70% / 30% 30% 70% 70%;
}--radius-tl: 30% 30%; --radius-tr: 70% 30%; --radius-br: 30% 70%; --radius-bl: 70% 70%;
Warum unseren Grenzradiusgenerator verwenden?
- Sofortige CSS-Randradius-Generierung: Generieren Sie CSS-Randradiuswerte visuell und erhalten Sie eine kopierfertige CSS-Ausgabe in Echtzeit. Unser Rahmenradiusgenerator aktualisiert die Vorschau und das CSS bei jeder Schiebereglerbewegung – kein Tastendruck erforderlich, keine Anmeldung erforderlich.
- Secure Border Radius Generator Online: Die gesamte CSS-Generierung erfolgt lokal in Ihrem Browser mithilfe von JavaScript. Ihre Designkonfigurationen verlassen nie Ihr Gerät und gewährleisten 100 % Privatsphäre, wenn Sie unseren Randradiusgenerator online verwenden.
- Randradius-Generator online – keine Installation: Nutzen Sie unseren Randradius-Generator direkt in Ihrem Browser, ohne dass Downloads, Plugins oder Node.js erforderlich sind. Generieren Sie jederzeit und von jedem Gerät aus CSS-Randradiuswerte.
- 8-Punkt-Steuerung und 10 Formvoreinstellungen: Legen Sie unabhängige horizontale und vertikale Radien für alle 4 Ecken fest (insgesamt 8 Werte), um Kreise, Pillen, Kleckse, Blätter und organische Formen zu erstellen. Wählen Sie aus 10 integrierten Voreinstellungen oder verknüpfen Sie alle Ecken, um sie gemeinsam zu bearbeiten. Gibt Kurzschrift-, Langschrift- und CSS-Variablenformate aus.
Häufige Anwendungsfälle für den Randradiusgenerator
- UI-Komponentendesign: Frontend-Entwickler verwenden unseren Rahmenradiusgenerator, um abgerundete Ecken für Schaltflächen, Karten, Modalitäten und Eingabefelder zu entwerfen. Ziehen Sie an den Griffen, um den perfekten Radius zu finden, und kopieren Sie das CSS direkt in Ihr Stylesheet.
- Design-System-Tokens: Design-Systemingenieure verwenden unseren Randradius-Generator, um konsistente Randradius-Tokens zu definieren. Die Ausgabe der CSS-Variablen wird direkt den Design-Token-Dateien für Tailwind, Figma-Tokens und Style Dictionary zugeordnet.
- Erstellung von Blobs und organischen Formen: Designer verwenden unseren Randradiusgenerator, um organische Blob-Formen für Heldenabschnitte, Avatare und dekorative Elemente zu erstellen. Die 8-Punkt-Schnittstelle ermöglicht vollständig asymmetrische Formen, die manuell nicht zu berechnen wären.
- App-Symbol- und Avatar-Rahmen: Mobile-Entwickler verwenden unseren Randradiusgenerator, um die Kreisform zu erstellen, die für iOS-App-Symbole und adaptive Android-Symbole verwendet wird. Die Voreinstellung „Squircle“ (30 %) erzeugt sofort die korrekte abgerundete quadratische Form.
- Visuelle Elemente der Landingpage: Marketingdesigner verwenden unseren Randradiusgenerator, um pillenförmige CTAs, abgerundete Bildrahmen und dekorative Formen für Landingpages zu erstellen. Besonders beliebt sind die Presets Pill und Blob für moderne SaaS-Landingpages.
- CSS-Randradius lernen: Entwickler, die CSS lernen, verwenden unseren Rahmenradius-Generator, um zu verstehen, wie die 8-Werte-Randradius-Syntax funktioniert. Die Live-Vorschau macht sofort deutlich, wie sich jeder horizontale und vertikale Radiuswert auf die Form auswirkt.
CSS-Randradius verstehen
- So funktioniert unser Randradius-Generator: Klicken Sie auf eine der 10 Formvoreinstellungen (Scharf, Abgerundet, Karte, Kreis, Pille, Kreis, Klecks, Blatt, Ei, Raute), um sofort eine Startform anzuwenden. Oder beginnen Sie mit der standardmäßigen asymmetrischen Form und passen Sie die Schieberegler manuell an.
- Ziehen Sie die 8 Eckgriffe: Jede Ecke verfügt über zwei Schieberegler – horizontaler (X) und vertikaler (Y) Radius. Ziehen Sie die Schieberegler oder geben Sie Werte direkt ein. Aktivieren Sie „Alle Ecken verknüpfen“, um alle 8 Werte gleichzeitig zu bearbeiten. Wechseln Sie jederzeit zwischen px- und %-Einheiten.
- Kopieren Sie das generierte CSS: Der Rahmenradiusgenerator gibt vier CSS-Formate in Echtzeit aus: Kurzschrift (Rahmenradius), Langschrift (einzelne Eckeigenschaften), vollständige CSS-Regel mit Selektor und CSS-Variablendeklarationen. Klicken Sie auf eine beliebige Schaltfläche „Kopieren“, um das gewünschte Format zu kopieren.
- CSS-Ausgabeformate für Randradius: Wenn alle Ecken gleich sind, wird Randradius ausgegeben: 16 Pixel. Wenn die Ecken unterschiedlich sind, aber X=Y, wird die 4-Werte-Form ausgegeben. Wenn X≠Y, wird die vollständige 8-Werte-Form mit einem Schrägstrich als Trennzeichen ausgegeben.
Häufig gestellte Fragen
Ein Randradiusgenerator ist ein visuelles Tool, mit dem Sie CSS-Randradiuswerte festlegen können, indem Sie Ziehpunkte an einer Vorschauform ziehen, und das kopierfertige CSS ausgibt. Unser Rahmenradiusgenerator unterstützt alle 8 einzelnen Eckwerte (oben-links-x, oben-links-y usw.) für vollständig asymmetrische Formen – keine Anmeldung erforderlich.
Der Rahmenradiusgenerator gibt die Abkürzung „Rahmenradius“ aus, wenn alle Ecken gleich sind, oder die vollständige 8-Werte-Syntax (Radius „Rand oben links“, Radius „Rand oben rechts“, Radius „Rand unten rechts“, Radius „Rand unten links“), wenn die Ecken unterschiedlich sind. Außerdem werden die CSS-Variablendeklarationen für Design-Token-Workflows ausgegeben.
Die 4-Werte-Syntax (z. B. 20px 40px 20px 40px) legt für jede Ecke den gleichen horizontalen und vertikalen Radius fest. Die 8-Werte-Syntax (z. B. 20px 40px 20px 40px / 10px 20px 10px 20px) legt unabhängige horizontale und vertikale Radien für jede Ecke fest und ermöglicht so elliptische und organische Blob-Formen.
Ja. Die gesamte CSS-Generierung erfolgt lokal in Ihrem Browser mithilfe von JavaScript. Es werden keine Daten an einen Server gesendet, sodass die vollständige Privatsphäre Ihrer Designarbeit gewährleistet ist.
Ja! Unser Grenzradiusgenerator ist 100 % kostenlos, ohne Anmeldung, ohne Konto und ohne Nutzungsbeschränkungen. Generieren Sie CSS-Randradiuswerte für jedes Projekt direkt in Ihrem Browser.
Ja. Indem Sie über die 8-Punkt-Griffschnittstelle unterschiedliche horizontale und vertikale Radien für jede Ecke festlegen, können Sie organische Klecksformen, Pillenformen, Blattformen und andere asymmetrische abgerundete Formen erstellen. Der Randradiusgenerator gibt die vollständige 8-wertige CSS-Syntax für diese Formen aus.
Der Randradiusgenerator enthält Voreinstellungen für gängige Formen: Kreis (50 %), Pille (9999 Pixel), abgerundet (8 Pixel), Karte (16 Pixel), Squircle (30 %), Blob (asymmetrische organische Form), Blatt (asymmetrisch) und scharf (0 Pixel). Klicken Sie auf eine Voreinstellung, um sie sofort anzuwenden und die CSS-Ausgabe anzuzeigen.
Ja. Der Rahmenradiusgenerator zeigt das generierte CSS in einem Codeblock mit einer Ein-Klick-Kopierschaltfläche an. Sie können auch einzelne Eigenschaftswerte oder die gesamte CSS-Regel einschließlich des Selektors kopieren.
Ja. Sie können im Rahmenradiusgenerator zwischen px- und %-Einheiten wechseln. Prozentwerte beziehen sich auf die Abmessungen des Elements – 50 % erzeugt einen Kreis für quadratische Elemente und eine Ellipse für rechteckige Elemente.