CSS-Blob-Generator
Organische Blob-Formen per border-radius mit acht Werten erzeugen
Über acht Schieberegler steuern Sie die Werte der border-radius-Schrägstrichsyntax und formen daraus organische Blobs – von der Wassertropfen- bis zur Blattform –, die Sie live in der Vorschau sehen. Designerinnen und Frontend-Entwickler erhalten so im Handumdrehen das passende CSS für dekorative Hintergründe, Masken für Profilbilder oder Karten-Layouts. Alle Berechnungen laufen ausschließlich im Browser ab und werden nicht an einen Server übertragen.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Starten Sie mit einer Vorlage Ihrer Wahl: organisch, Wassertropfen, Blatt oder Ei.
- Verfeinern Sie die Form über die acht Regler für die horizontale und vertikale Richtung.
- Verfolgen Sie in der Vorschau, wie sich der Blob in Echtzeit verändert.
- Kopieren Sie den fertigen border-radius-Code über die Schaltfläche und fügen Sie ihn in Ihr Projekt ein.
FAQ
- Funktioniert das erzeugte CSS in allen Browsern?
- Die Schrägstrichsyntax (/) von border-radius wird von allen modernen Browsern breit unterstützt. Müssen Sie ältere Browser bedienen, empfiehlt sich ein gesonderter Test.
- Wofür stehen die Reglerwerte?
- Die vier Werte vor dem Schrägstrich bestimmen den horizontalen Radius jeder Ecke, die vier danach den vertikalen. Aus ihrer Kombination ergeben sich die unterschiedlichsten Rundungen.
- Lässt sich die Form auch auf Bilder anwenden?
- Ja. Übertragen Sie den erzeugten border-radius-Wert einfach in das CSS eines Bildes oder eines div-Elements – dieses wird dann als Blob beschnitten dargestellt.