Generator border-radius
Darmowy kreatywny generator border-radius online. Przeciągnij 8 uchwytów lub wybierz kształt blob, aby tworzyć organiczne formy CSS i kopiować kod od razu.
Co oznacza składnia border-radius z 8 wartościami?
W składni border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 wartości przed ukośnikiem to promienie poziome (lewy górny, prawy górny, prawy dolny, lewy dolny), a po nim promienie pionowe. Różne wartości w każdym kierunku tworzą organiczne kształty blob.
Jak użyć wygenerowanego CSS?
Skopiuj linię border-radius i wklej ją do dowolnej reguły CSS elementu, który chcesz ukształtować, np. .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Działa w czystym CSS, Sass, wartościach dowolnych Tailwind i stylach inline.
Gdzie stosuje się kształty blob?
Kształty blob są popularne w ilustracjach hero, awatarach, zdjęciach profilowych, kartach funkcji, przyciskach i dekoracyjnych tłach w nowoczesnym projektowaniu stron i aplikacji.
Czy zaokrąglone narożniki działają we wszystkich przeglądarkach?
Tak. border-radius jest obsługiwany przez wszystkie nowoczesne przeglądarki, w tym Chrome, Firefox, Safari, Edge i przeglądarki mobilne, bez prefiksów producentów.
Czy można animować kształt blob?
Tak. border-radius to właściwość animowalna, więc przejście CSS pozwala płynnie morfować między kształtami, np. .blob { transition: border-radius .8s ease; }.
Jaka jest różnica między składnią 4- a 8-wartościową?
Forma 4-wartościowa nadaje każdemu narożnikowi ten sam promień poziomy i pionowy, co wystarcza dla pigułek czy kół. Forma 8-wartościowa oddziela promienie poziome i pionowe, co umożliwia asymetryczne, organiczne kształty.
Jak zrobić idealne koło?
Ustaw wszystkie osiem wartości na 50% dla elementu kwadratowego albo po prostu użyj border-radius: 50%. Możesz też zacząć od predefiniowanego kształtu zbliżonego do koła i go dostroić.
Czy moje dane są gdzieś wysyłane?
Nie. Generator działa w całości w Twojej przeglądarce w czystym CSS i JavaScript. Nic z tego, co przeciągasz, wpisujesz lub kopiujesz, nie trafia na serwer.
Czy mogę tego użyć na elementach niekwadratowych?
Tak, ale promienie procentowe są względne wobec wymiarów elementu, więc prostokąt otrzyma eliptyczne narożniki i będzie wyglądał inaczej niż kwadratowy podgląd. Potraktuj wygenerowane wartości jako punkt wyjścia i dostosuj je.
Jak korzystać z Generator border-radius
Ośmiowartościowy border-radius tworzy organiczne kształty blob z eliptycznymi narożnikami, nieosiągalnymi dla zwykłego zaokrąglonego prostokąta. Rzeźb kształt uchwytami i skopiuj gotowy CSS — wszystko renderuje się na żywo w Twojej przeglądarce.
- Chwyć dowolny z ośmiu uchwytów na krawędziach figury — te na krawędziach górnej i dolnej ustawiają promienie poziome, a boczne pionowe.
- Kliknij jeden z sześciu kwadratów z gotowymi kształtami, aby wystartować od zaprojektowanego bloba, a potem dopracuj wartości w polach liczbowych Promienie poziome i Promienie pionowe (po jednym na narożnik, 0–100%).
- Naciśnij Losowo, aby jednym kliknięciem wylosować nowy organiczny kształt, albo Resetuj, by wrócić do domyślnej figury i kolorów.
- Wybierz Kolor kształtu i Tło, aby obejrzeć bloba na docelowej palecie — oba aktualizują się natychmiast.
- Naciśnij Kopiuj CSS, aby zabrać żywą deklarację border-radius z dolnego paska i wkleić ją na dowolny element.
Zastosuj kod na kwadratowym elemencie z overflow: hidden dla klasycznego wyglądu bloba; wartości procentowe utrzymują płynność krzywej w każdym rozmiarze, a ukośnik w składni oddziela promienie poziome od pionowych.
Powiązane narzędzia
- Generator Border Radius CSS Wizualny generator border-radius CSS. Dostosuj każdy róg niezależnie z podglądem na żywo i natychmiast skopiuj kod CSS.
- Generator gradientów CSS Twórz oszałamiające gradienty CSS wizualnie. Generuj gradienty liniowe, radialne i stożkowe z wieloma punktami kolorów, kątami i pozycjami. Natychmiast kopiuj gotowy do produkcji kod CSS.
- Generator Box Shadow CSS Darmowy generator box-shadow CSS online. Wizualnie twórz piękne cienie z regulowanym przesunięciem, rozmyciem, rozprzestrzenieniem, kolorem i inset. Podgląd na żywo i natychmiastowe kopiowanie kodu.
- Generator palety kolorów Twórz piękne, harmonijne palety kolorów natychmiast za pomocą naszego darmowego generatora online. Obsługuje tryby monochromatyczne, analogowe, komplementarne, triadyczne, split-komplementarne i tetradyczne. Dostosuj kolory za pomocą suwaków HSL, zablokuj ulubione i eksportuj jako CSS, Tailwind, JSON lub SVG. 100% oparte na przeglądarce, Twoje dane nigdy nie opuszczają urządzenia.
- Konwerter kolorów Darmowy konwerter kolorów online. Natychmiastowa konwersja formatów HEX, RGB, HSL, HSV z wizualnym wyborem koloru. 100% prywatne, działa w przeglądarce.
- Generator easing CSS Darmowy online generator easing CSS. Przeciągaj punkty kontrolne cubic-bezier na interaktywnej krzywej, wybierz jeden z 18 presetów, oglądaj zapętloną animację kulki i natychmiast kopiuj funkcję czasu.
- Generator text-shadow CSS Darmowy online generator text-shadow CSS. Nakładaj wiele warstw cienia z przesunięciem, rozmyciem, kolorem i nieprzezroczystością, wypróbuj presety Neon, 3D, Retro i natychmiast kopiuj CSS.
- Generator CSS clip-path Darmowy online generator CSS clip-path. Projektuj kształty polygon, circle, ellipse i inset z przeciąganymi punktami, podglądem na żywo i kopiowaniem kodu CSS jednym kliknięciem.