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

CSS Pillen-/Stadionformgenerator

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 einen sehr großen Radius verschoben sind: 999 Pixel. Bei einem typischen Rechteck in der Größe einer Schaltfläche wird ein so großer Radius vom Browser auf genau die halbe Höhe der Box zugeschnitten, wodurch die vollständig abgerundete Pillen- oder Stadionform anstelle eines Quadrats mit leicht abgerundeten Ecken entsteht.

Aus diesem Grund benötigen Pillenschaltflächen keinen genauen Radiuswert, der auf die Höhe jeder Schaltfläche abgestimmt ist – jede Zahl, die bequem größer als die halbe Höhe ist, liefert das identische abgeschnittene Ergebnis. Aus diesem Grund ist 999px (oder sogar 9999px) in CSS zur informellen Community-Kurzform für „runden Sie dies vollständig“ geworden.

Ändern Sie die Größe der Box in Ihrem eigenen Layout und die gleichen 999 Pixel erzeugen weiterhin eine volle Pille in jeder Höhe, da der Browser immer automatisch auf die Hälfte der Box zuschneidet. Kopieren Sie das CSS, sobald es richtig aussieht, oder lösen Sie die Verknüpfung der Ecken, um stattdessen eine asymmetrische Kapsel zu erstellen.

🛡️
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.