Generátor border-radius
Bezplatný kreativní generátor border-radius online. Tažením 8 úchopů nebo výběrem tvaru blob vytvoříte organické CSS tvary a okamžitě zkopírujete kód.
Co znamená syntax border-radius s 8 hodnotami?
V syntaxi border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 jsou hodnoty před lomítkem vodorovné poloměry (vlevo nahoře, vpravo nahoře, vpravo dole, vlevo dole) a hodnoty za ním svislé poloměry. Různé hodnoty v každém směru vytvářejí organické tvary blob.
Jak použít vygenerované CSS?
Zkopírujte řádek border-radius a vložte jej do libovolného CSS pravidla elementu, který chcete tvarovat, např. .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Funguje v čistém CSS, Sass, arbitrárních hodnotách Tailwind i v inline stylech.
Kde se tvary blob používají?
Tvary blob jsou oblíbené u hero ilustrací, avatarů, profilových fotek, karet funkcí, tlačítek a dekorativních pozadí v moderním designu webů a aplikací.
Fungují zaoblené rohy ve všech prohlížečích?
Ano. border-radius je podporován všemi moderními prohlížeči, včetně Chrome, Firefox, Safari, Edge a mobilních prohlížečů, bez dodavateských prefixů.
Mohu tvar blob animovat?
Ano. border-radius je animovatelná vlastnost, takže CSS přechod umožňuje plynule morphovat mezi tvary, např. .blob { transition: border-radius .8s ease; }.
Jaký je rozdíl mezi syntaxí se 4 a s 8 hodnotami?
Forma se 4 hodnotami nastaví každému rohu stejný vodorovný i svislý poloměr, což stačí pro tobličky a kruhy. Forma s 8 hodnotami odděluje vodorovné a svislé poloměry, což umožňuje asymetrické organické tvary.
Jak vytvořit dokonalý kruh?
Nastavte všech osm hodnot na 50 % u čtvercového elementu, nebo jednoduše použijte border-radius: 50%. Můžete také začít od předvolby blízké kruhu a doladit ji.
Odesílají se má data někam na server?
Ne. Generátor běží zcela ve vašem prohlížeči v čistém CSS a JavaScriptu. Nic z toho, co přetahujete, píšete nebo kopírujete, se na server neposílá.
Lze to použít na nečtvercové elementy?
Ano, ale procentuální poloměry jsou relativní k rozměrům elementu, takže obdélník dostane elipsovité rohy a bude vypadat jinak než čtvercový náhled. Vygenerované hodnoty berte jako výchozí bod a upravte je.
Jak používat Generátor border-radius
Osmihodnotový border-radius vytváří organické tvary blob s eliptickými rohy, kterých obyčejný zaoblený obdélník nikdy nedosáhne. Tvarujte úchopy a zkopírujte hotové CSS — vše se vykresluje naživo ve vašem prohlížeči.
- Chyťte kterýkoli z osmi úchopů na hranách tvaru — ty na horní a dolní hraně nastavují vodorovné poloměry, boční svislé.
- Klikněte na jeden ze šesti přednastavených čtverců a vyjděte z navrženého blobu, pak doladte hodnoty v číselných polích Vodorovné poloměry a Svislé poloměry (po jednom za roh, 0–100 %).
- Stiskněte Náhodně a jedním kliknutím získáte nový organický tvar, nebo Obnovit pro návrat k výchozímu tvaru a barvám.
- Zvolte Barvu tvaru a Pozadí a prohlédněte si blob na cílové paletě — obojí se mění okamžitě.
- Stiskněte Kopírovat CSS, převeďte živou deklaraci border-radius ze spodní lišty a vložte ji na libovolný prvek.
Aplikujte kód na čtvercový prvek s overflow: hidden pro klasický vzhled blobu; procenta drží křivku plynulou v každé velikosti a lomítko v syntaxi odděluje vodorovné poloměry od svislých.
Související nástroje
- Generátor Border Radius CSS Vizuální generátor border-radius CSS. Upravte každý roh nezávisle s živým náhledem a okamžitě zkopírujte CSS kód.
- Generátor CSS gradientů Vytvářejte úžasné CSS gradienty vizuálně. Generujte lineární, radiální a kuželové gradienty s více barevnými zastávkami, úhly a pozicemi. Okamžitě zkopírujte produkčně připravený CSS kód.
- Generátor CSS Box Shadow Bezplatný online generátor CSS box-shadow. Vizuálně vytvářejte krásné stíny s nastavitelným posunem, rozostřením, šířením, barvou a inset. Živý náhled a okamžité kopírování kódu.
- Generátor barevné palety Vytvářejte krásné, harmonické barevné palety okamžitě s naším bezplatným online generátorem. Podporuje monochromatické, analogické, komplementární, triadické, rozděleně-komplementární a tetradické režimy. Laďte barvy pomocí HSL posuvníků, zamykejte oblíbené a exportujte jako CSS, Tailwind, JSON nebo SVG. 100% založeno na prohlížeči, vaše data nikdy neopustí vaše zařízení.
- Převodník barev Bezplatný online převodník barev. Okamžitý převod formátů HEX, RGB, HSL, HSV s vizuálním výběrem. 100% soukromí, běží ve vašem prohlížeči.
- Generátor easing CSS Bezplatný online generátor easing CSS. Přetahujte kontrolní body cubic-bezier na interaktivní křivce, vyberte si z 18 předvoleb, sledujte smyčkovou animaci koule a okamžitě zkopírujte časovací funkci.
- Generátor text-shadow CSS Bezplatný online generátor text-shadow CSS. Vrstvte více stínů s posunem, rozostřením, barvou a neprůhledností, vyzkoušejte předvolby Neon, 3D, Retro a okamžitě zkopírujte CSS.
- Generátor CSS clip-path Bezplatný online generátor CSS clip-path. Navrhujte tvary polygon, circle, ellipse a inset s tažitelnými body, živým náhledem a zkopírováním kódu CSS na jedno kliknutí.