Randradiusgenerator
Gestalten Sie Randradien visuell – von weichen Ecken bis hin zu Klecksformen.
So verwenden Sie Randradiusgenerator
- Passen Sie die Ecken an – zusammen für eine gleichmäßige Abrundung, individuell für Formen.
- Sehen Sie sich die Live-Vorschau an – Die Radiuspersönlichkeit lässt sich anhand von Zahlen nicht beurteilen.
- Probieren Sie den Blob-Modus (verschiedene horizontale/vertikale Radien) für organische Heldenformen aus.
- Kopieren Sie das CSS – und standardisieren Sie 2–3 Radiuswerte in Ihrem gesamten Design.
Was ist Randradiusgenerator?
Ein Randradius-Generator macht Eckenrundungen sichtbar: Passen Sie den Radius jeder Ecke mit der Live-Vorschau an und kopieren Sie das CSS border-radius. Eine gleichmäßige Rundung ist trivial (border-radius: 8px); Der Generator verdient seinen Unterhalt mit der Steuerung pro Ecke (8px 24px 8px 24px-Muster) und der exotischen Slash-Syntax – 30 % 70 % 70 % 30 % / 30 % 30 % 70 % 70 % – wobei sich horizontale und vertikale Radien pro Ecke unterscheiden und die organischen „Klecks“-Formen entstehen, die moderne Landungen schmücken Seiten.
Radius ist eine Tonwahl: 0 liest technisch, 4–8 Pixel professionell, 12–24 Pixel freundlich, 9999 Pixel pillenförmig und asymmetrische Blobs verspielt – nur wenige CSS-Eigenschaften legen die Persönlichkeit eines Designs so direkt fest.
Über den Randradiusgenerator
Ziehen Sie die Steuerelemente pro Ecke, sehen Sie sich die Formaktualisierung live an und kopieren Sie das CSS – von den subtilen 12 Pixeln einer Karte bis zu einem vollständigen achtwertigen Blob.
Die praktischen Muster: konsistente Radien über ein Designsystem hinweg (wählen Sie 2–3 Werte aus – z. B. 6 Pixel-Eingaben, 12 Pixel-Karten, 24 Pixel-Modale – und verwenden Sie sie wieder; zufällige Radien werden als schlampig interpretiert); der Pillenknopf (Radius ≥ halber Höhe, herkömmlich 9999px); Kreise (50 % auf einem quadratischen Element – das Avatar-Rezept); Sprechblasen- und Tabulatorformen (drei Ecken rund, eine quadratisch); und Hero-Blobs über die Slash-Syntax, oft animiert zwischen zwei Radiussätzen für einen sanften Morphing-Hintergrund.
Ein Hinweis zur Geometrie: Verschachtelte abgerundete Elemente sehen bei gleichen Radien falsch aus – der Radius des inneren Elements sollte dem des äußeren abzüglich der Polsterung zwischen ihnen entsprechen (äußere 16 Pixel, 8 Pixel Polsterung → innere 8 Pixel), sonst streiten sich die Ecken sichtbar.