CSS-Blob-Formgenerator
Organische Blob-Formen mit 8-Wert-border-radius erstellen
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Mit diesem Tool passt du acht Schieberegler an, um eine border-radius-Blob-Form zu gestalten, und siehst die organische Kurve live in der Vorschau. Praktisch für Designer und Frontend-Entwickler, die schnell CSS für dekorative Hintergründe, Avatar-Masken oder Card-UIs brauchen. Alles läuft direkt im Browser, es wird nichts an einen Server gesendet.
Anleitung
- Wähle eine Voreinstellung — Organisch, Tropfen, Blatt oder Ei.
- Stelle die acht horizontalen und vertikalen Schieberegler ein, um die Form zu verfeinern.
- Beobachte, wie sich der Blob live in der Vorschau verändert.
- Kopiere den fertigen border-radius-CSS-Code und füge ihn in dein Projekt ein.
FAQ
- Funktioniert das generierte CSS in jedem Browser?
- Die Schrägstrich-Syntax (/) von border-radius wird von modernen Browsern gut unterstützt. Für ältere Browser solltest du vorher testen.
- Was steuern die Reglerwerte?
- Die vier Werte vor dem Schrägstrich bestimmen den horizontalen Radius jeder Ecke, die vier danach den vertikalen — so entstehen vielfältige Kurven.
- Kann ich die Form auch auf ein Bild anwenden?
- Ja — wende den erzeugten border-radius-Wert auf ein Bild- oder div-Element an, um es in die Blob-Form zu schneiden.