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

CSS-Squircle-Generator – Abgerundetes Quadrat

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 zu 30 % verbunden sind, eine moderate Rundung, die zwischen einem scharfen Quadrat und einem Vollkreis liegt. Es handelt sich nicht um ein echtes mathematisches Kreischen (eine Superellipse), aber es kommt einer einzelnen CSS-Eigenschaft am nächsten und es ist der Wert, den die meisten Designsysteme anstreben, wenn sie dieses Aussehen wünschen.

Der Name stammt von den abgerundeten quadratischen App-Symbolen, die durch iOS populär gemacht wurden: Genug Rundung an jeder Ecke, um sich weich und freundlich anzufühlen, aber nie so stark, dass die Form als rund erscheint. Aus genau diesem Grund stützen sich Symbolkacheln, Kartenminiaturen und moderne Avatarrahmen alle auf Radien in demselben groben Bereich.

Bewegen Sie den verknüpften Schieberegler nach oben, um ein weicheres, kreisförmigeres Gefühl zu erhalten, oder nach unten, um ein klareres, quadratischeres Aussehen zu erhalten. Die CSS-Linie wird bei jeder Änderung aktualisiert und kann kopiert werden, sobald sich die Kurve für Ihr Symbol oder Ihre Karte richtig anfühlt.

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