Jak narysować nieregularny, organiczny kształt CSS-em?
border-radius to nie tylko zaokrąglone rogi. Pełna składnia akceptuje osiem wartości (cztery dla poziomej osi, cztery dla pionowej), co pozwala narysować organiczne kształty typu blob używane w nowoczesnych landing page'ach (sekcje hero, awatary, "playful" ilustracje).
Standardowo wpiszesz `border-radius: 16px` i masz prostokąt z miękkimi rogami. Ale `border-radius: 60% 40% 30% 70% / 40% 60% 70% 30%` to już kropla, liść albo kamyk. Każdy z czterech rogów ma osobny promień poziomy i pionowy.
Tu masz 8 suwaków plus tryb symetryczny (4 suwaki, gdy chcesz tylko prostokąt z różnymi rogami). Klik "Kopiuj" i wklejasz CSS.
Jak korzystać
- Kliknij presetkę blob z galerii albo zacznij od defaultu. Każdy suwak (0-100%) zmienia inny róg.
- Tryb symetryczny włącz, jeśli wystarczy Ci 4 suwaki (prostokąt z różnymi rogami). Wyłączony tryb = pełne 8 wartości dla organicznych kształtów.
- Wybierz kolor wypełnienia i kolor tła żeby zobaczyć kształt w kontekście.
- Skopiuj CSS i wklej w plik stylów. Pamiętaj: kształt skaluje się procentowo z wymiarami elementu.
- Trick: dodaj `background: url(...)` lub gradient i masz organiczny avatar albo wytłumaczenie sekcji hero.
Do czego się przydaje
Organiczne kształty to trend w nowoczesnym webdesignie (Stripe, Framer, większość fintech landing page'ów):
- Hero section z blobami w tle. Trzy duże kolorowe bloby z lekkim cieniem dają miękki, premium feel bez grafiki.
- Awatary użytkowników. Zamiast okrągłych zdjęć, lekko nieregularny squircle (Apple HIG) wygląda mniej "korporacyjnie".
- Karty produktu z ozdobnym ksztaltem. Element dekoracyjny w narożniku karty.
- Ikony i piktogramy w niestandardowych kształtach.
- Sekcje "feature" w landing page'u. Kolorowa kropla jako tło dla każdego punktu = playful look.
- Animacja blob (morfingu kształtu). Z `transition: border-radius 2s` dostajesz powoli morfujący kształt, bardzo popularny efekt w nowoczesnych portfoliach.
Aby dodać cień pod organiczny kształt, zobacz generator box-shadow. Dla bardziej skomplikowanych kształtów (gwiazdki, strzałki, dymki), użyj clip-path generator.