⭐ 0
🔍
Text Obrázek PDF a Dokumenty Audio Hudba Elektronika Čas Užitečné programy Validátory Ezoterika Hry

Organický CSS Blob Shape Generator

Vizuálně navrhněte CSS border-radius: čtyři nezávislé rohové posuvníky v pixelech nebo procentech, zkratka pro okamžité kruhy a pilulky typu link-all-all, plus organický režim blob s náhodnými tvary.

12px
12px
12px
12px
Zpracování... 0%

Výsledek

Tato stránka otevře generátor poloměru ohraničení přímo v režimu blob s již načteným organickým tvarem: žádné čtvercové rohy, žádný dokonalý kruh, jen měkký nepravidelný obrys vytvořený pouze ze samotného CSS. Klepnutím na Randomize kdykoli získáte novou variaci.

Trik za každým blobem CSS je syntaxe lomítka s osmi hodnotami: border-radius přijímá dvě sady čtyř procent oddělených lomítkem, přičemž první sada zakřivuje vodorovné poloměry a druhá svislé. Nesoulad těchto dvou sad je přesně to, co rozbije symetrii obyčejného zaobleného obdélníku do organického obrysu.

Bloby jako tento vyplňují prázdné místo za obrázky hrdinů, avatary a ilustracemi na bezpočtu moderních vstupních stránek právě proto, že není potřeba žádná knihovna ani export SVG – jsou to čtyři řádky CSS. Zkopírujte aktuální tvar nebo pokračujte v náhodném výběru, dokud se jeden nebude hodit pro vaše rozvržení.

🛡️
Spuštěno v prohlížeči

Vaše soubory a vstupy nikdy neopustí toto zařízení. Zpracování probíhá zcela offline. 100% bezpečné.

Přijaté formáty a pravidla

  • Režim rohů: nezávislé posuvníky poloměru vlevo nahoře, vpravo nahoře, vpravo dole a vlevo dole, každý přepínatelný mezi jednotkami px a procenty.
  • Zaškrtávací políčko Propojit všechny rohy, které ovládá každý roh jedním posuvníkem, plus šachovnicový náhled na světlém nebo tmavém pozadí, takže oříznuté rohy zůstanou viditelné.
  • Režim blob s tlačítkem Randomize, které vytváří organické tvary se syntaxí lomítka s osmi hodnotami, zobrazené velké a připravené ke kopírování jako CSS.

Hlavní výhody

✓ Každý posuvník okamžitě aktualizuje živý náhled a řádek CSS, takže nikdy nebudete muset hádat, jak ve skutečnosti vypadá 12px 40% 8px 24%.
✓ Zkratka pro všechny rohy změní jeden posuvník na dokonalý kruh, pilulku nebo veverku, aniž byste se rukou dotkli ostatních tří rohů.
✓ Režim blob generuje organické, randomizované tvary se syntaxí CSS s osmi hodnotami lomítka – vzhled, který nikdy nemůže vytvořit jediná hodnota border-radius.

Případy použití

  • • Vytočte čtyři poloměry rohů karty nezávisle — zaokrouhlete pouze horní část rozevíracího panelu nebo pouze jednu stranu karty.
  • • Propojte všechny čtyři rohy s jedním posuvníkem a vytvořte během několika sekund dokonalý kruh, tlačítko pilulky ve tvaru stadionu nebo veverku ve stylu iOS.
  • • Přepněte do režimu blob a stiskněte Randomize, dokud organický tvar nezapadne do prázdného prostoru za obrázkem hrdiny nebo avatarem, poté zkopírujte CSS.