⭐ 0
🔍
Text Bild PDF & Dokumente Audio Musik Elektronik Zeit Dienstprogramme Validatoren Esoterik Spiele

CSS-Kreisgenerator – 50 % Randradius

Gestalten Sie den CSS-Randradius visuell: vier unabhängige Eckschieberegler in Pixel oder Prozent, eine Verknüpfung aller Ecken für sofortige Kreise und Pillen sowie einen organischen Blob-Modus mit zufälligen Formen.

12px
12px
12px
12px
Verarbeitung... 0%

Ergebnis

Auf dieser Seite wird der Randradiusgenerator geöffnet, bei dem alle vier Ecken verknüpft und auf 50 % eingestellt sind. Dieser Wert verwandelt eine Box mithilfe von CSS in einen Kreis. Ganz ehrlich: Bei einem quadratischen Kasten ergibt das einen perfekten Kreis, bei einem rechteckigen Kasten ergeben die gleichen 50 % hingegen eine stadionartige Ellipse, da jede Ecke immer nur ihr eigenes Viertel abrundet.

Diese Unterscheidung ist wichtig, da ein Randradius von 50 % die häufigste Methode zum Erstellen kreisförmiger Avatare, Symbolabzeichen und Statuspunkte in CSS ist – viel einfacher als das Ausschneiden eines Kreises mit einer Maske oder das Zeichnen eines Kreises in SVG, und er bleibt in jeder Größe scharf, da es sich um einen relativen Prozentsatz und nicht um einen festen Pixelradius handelt.

Stellen Sie das Feld in Ihrem eigenen CSS auf eine feste quadratische Größe um, um den perfekten Kreis festzulegen, oder lassen Sie es absichtlich rechteckig, um eine pillenartige Form zu erhalten – in jedem Fall bleiben die Ecken hier verknüpft, sodass ein einzelner Schieberegler alle vier synchron hält, während Sie das resultierende CSS kopieren.

🛡️
Im Browser ausgeführt

Ihre Dateien und Eingaben verlassen dieses Gerät nie. Die Verarbeitung läuft vollständig offline. 100 % sicher.

Akzeptierte Formate & Regeln

  • Eckenmodus: Unabhängige Schieberegler für den Radius oben links, oben rechts, unten rechts und unten links, jeweils umschaltbar zwischen px- und Prozenteinheiten.
  • Kontrollkästchen „Alle Ecken verknüpfen“, das jede Ecke von einem Schieberegler aus steuert, plus eine Schachbrettvorschau auf einem hellen oder dunklen Hintergrund, damit abgeschnittene Ecken sichtbar bleiben.
  • Blob-Modus mit einer Schaltfläche „Randomisieren“, der organische Achtwert-Schrägstrich-Syntax-Formen erstellt, die groß angezeigt werden und als CSS kopiert werden können.

Wichtigste Vorteile

✓ Jeder Schieberegler aktualisiert die Live-Vorschau und die CSS-Zeile sofort, sodass Sie nie raten müssen, wie 12 Pixel 40 % 8 Pixel 24 % tatsächlich aussehen.
✓ Die Verknüpfung „Alle Ecken verknüpfen“ verwandelt einen Schieberegler in einen perfekten Kreis, eine Pille oder ein Kreis, ohne die anderen drei Ecken mit der Hand zu berühren.
✓ Der Blob-Modus generiert organische, zufällige Formen mit der CSS-Slash-Syntax mit acht Werten – ein Aussehen, das ein einzelner Wert für den Rahmenradius niemals erzeugen kann.

Anwendungsfälle

  • • Wählen Sie die vier Eckradien einer Karte unabhängig voneinander aus – runden Sie nur die Oberseite eines Dropdown-Felds oder nur eine Seite einer Lasche ab.
  • • Verknüpfen Sie alle vier Ecken mit einem Schieberegler, um in Sekundenschnelle einen perfekten Kreis, einen stadionförmigen Pillenknopf oder ein Kreischen im iOS-Stil zu erstellen.
  • • Wechseln Sie in den Blob-Modus und klicken Sie auf „Randomisieren“, bis eine organische Form in den leeren Raum hinter einem Heldenbild oder Avatar passt. Kopieren Sie dann das CSS.