Generátor box-shadow

Tažením posuvníků vytvořte stín boxu, vrstvěte stíny pro větší hloubku a okamžitě zkopírujte výsledný CSS kód.

Vrstvy stínů
Vrstva 1
CSS
Pomocí posuvníků upravte tvar stínu.

Každý stín se vykresluje ve vašem prohlížeči. Nic z toho, co zde nastavíte, se neodesílá na servery BroBroGo.

Časté dotazy

Co přesně ovládají hodnoty offset, blur a spread?

Posun (offset) posouvá stín doleva/doprava a nahoru/dolů, rozostření (blur) zjemňuje jeho okraje a roztažení (spread) stín před rozostřením zvětšuje nebo zmenšuje. Záporné roztažení stín stáhne dovnitř, což je užitečné pro těsné, blízké stíny.

K čemu slouží volba inset?

Běžný stín dopadá vně prvku, podobně jako světlo za vystouplou kartou. Volba Inset jej naopak otočí dovnitř, takže prvek vypadá jako promáčknutý – to se hodí pro zapuštěná vstupní pole nebo stisknutá tlačítka.

Proč vrstvit více stínů na sebe?

Jediný stín vypadá od určité velikosti ploše. Skutečná hloubka obvykle kombinuje těsný, tmavý stín s jemným, širším stínem – přidejte druhou vrstvu a vylaďte každou zvlášť, abyste tohoto efektu dosáhli.

Generátor CSS Cubic BezierTažením dvou táhel vytvořte křivku plynulosti, sledujte pohyb bodu v porovnání s rovnoměrným pohybem a zkopírujte hodnotu cubic-bezier().Generátor přechodůVytvořte lineární, radiální nebo kónický přechod, přidejte barevné body, nastavte směr a jedním kliknutím zkopírujte CSS.Generátor border-radiusZaoblete každý roh pomocí posuvníků, vytvářejte organické tvary v eliptickém režimu a okamžitě zkopírujte CSS.Generátor FlexboxuNastavte flex kontejner a jeho položky pomocí vizuálních prvků, sledujte změny v reálném čase a zkopírujte CSS jedním kliknutím.CSS Grid generátorNastavte sloupce a řádky, tažením přes buňky rozmístěte položky a jedním kliknutím zkopírujte CSS mřížky s odpovídajícím HTML.Kalkulačka CSS clamp()Zadejte velikost pro malé a velké obrazovky a získejte plynulou hodnotu clamp(), která se mezi nimi hladce přizpůsobuje – pro velikost písma, výplně, okraje nebo mezery.Převodník barevPřevádějte barvy mezi formáty HEX, RGB, HSL, HSV, CMYK a LAB – upravte jedno pole a ostatní se průběžně aktualizují.Formátování a minifikace CSSUpravte odsazení nepřehledného CSS pro lepší čitelnost, nebo ho minifikujte pro produkci – s bezpečným režimem, který nikdy nemění pořadí pravidel.Kontrola kontrastuZadejte barvu textu a pozadí a zjistěte kontrastní poměr WCAG a které úrovně AA a AAA vyhovují.