Randradiusgenerator

Eine Randradius-Deklaration kann bis zu vier unabhängige Eckwerte sowie eine optionale Schrägstrichsyntax mit acht Werten für organische Kurven annehmen – mehr bewegliche Teile, als den meisten Menschen bewusst ist, bis sie etwas mehr als eine einfache abgerundete Karte benötigen. Dieser Generator bringt alle diese Teile auf den Bildschirm: vier Eckschieberegler mit eigener px- oder Prozenteinheit, eine Verknüpfung aller Ecken für symmetrische Formen und einen Blob-Modus für Formen, die kein einzelner Radiuswert ausdrücken kann.

Der Eckenmodus deckt die Formen ab, nach denen Menschen tatsächlich greifen: Verknüpfen Sie jede Ecke mit einem Schieberegler für perfekte Kreise, Pillen und Kreise oder heben Sie die Verknüpfung auf, um nur die Oberseite eines Dropdown-Felds oder nur eine Seite einer Karte abzurunden. Eine Schachbrett-Vorschau hinter der Form, die zwischen einem hellen und einem dunklen Hintergrund umschaltbar ist, macht deutlich, welche Ecken in welchem ​​Radius abgeschnitten werden – derselbe visuelle Trick, den Datei-Tools auf dieser Website verwenden, um Transparenz anzuzeigen.

Der Blob-Modus ist die andere Hälfte: Die CSS-Slash-Syntax mit acht Werten sorgt dafür, dass die horizontalen und vertikalen Radien jeder Ecke nicht übereinstimmen, wodurch aus einem abgerundeten Rechteck ein organischer, unregelmäßiger Umriss wird. Klicken Sie jederzeit auf „Randomisieren“, um eine neue Form zu erhalten, und kopieren Sie das genaue CSS dahinter – kein SVG-Export oder externe Bibliothek erforderlich. Voreingestellte Seiten decken die Anfragen ab, die Menschen tatsächlich in ein Suchfeld eingeben: einen perfekten Kreis, einen stadionförmigen Pillenknopf, ein Kreischen im iOS-Stil und einen vorgefertigten organischen Klecks.

Wie jedes Tool auf dieser Website läuft es vollständig in Ihrem Browser: kein Upload, kein Konto, und der Generator arbeitet offline weiter, sobald die Seite geladen ist.