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

Organischer CSS-Blob-Formgenerator

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 direkt im Blob-Modus mit einer bereits geladenen organischen Form geöffnet: keine quadratischen Ecken, kein perfekter Kreis, nur ein weicher, unregelmäßiger Umriss, der allein aus CSS erstellt wurde. Klicken Sie jederzeit auf „Randomisieren“, um eine neue Variante zu erhalten.

Der Trick hinter jedem CSS-Blob ist die Slash-Syntax mit acht Werten: border-radius akzeptiert zwei Sätze von vier Prozentsätzen, die durch einen Schrägstrich getrennt sind, wobei der erste Satz die horizontalen Radien und der zweite die vertikalen Radien krümmt. Die Nichtübereinstimmung der beiden Sätze ist genau das, was die Symmetrie eines einfachen, abgerundeten Rechtecks ​​in einen organischen Umriss aufbricht.

Blobs wie dieser füllen den leeren Raum hinter Heldenbildern, Avataren und Illustrationen auf unzähligen modernen Landingpages, gerade weil keine Bibliothek oder SVG-Export erforderlich ist – es sind vier Zeilen CSS. Kopieren Sie die aktuelle Form oder machen Sie mit der Zufallsauswahl weiter, bis sich eine für Ihr Layout 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.