Generátor tieňov (Box Shadow)

Nastavte tieň pomocou posuvníkov, vrstvite tiene pre dosiahnutie hĺbky a okamžite skopírujte hotové CSS.

Vrstvy tieňov
Vrstva 1
CSS
Pomocou posuvníkov upravte tvar tieňa.

Každý tieň sa vykresľuje vo vašom prehliadači. Nič z toho, čo tu nastavíte, sa neodosiela na BroBroGo.

Časté otázky

Čo presne ovládajú hodnoty posunu, rozostrenia a rozprestretia?

Posun (offset) posúva tieň doľava/doprava a hore/dole, rozostrenie (blur) zjemňuje jeho okraje a rozprestretie (spread) ho pred rozostrením zväčšuje alebo zmenšuje. Záporné rozprestretie vtiahne tieň dovnútra, čo je užitočné pre tesné, blízke tiene.

Čo robí možnosť Inset?

Bežný tieň dopadá mimo prvku, podobne ako svetlo za vystúpenou kartou. Voľba Inset (vnútorný tieň) ho preklopí dovnútra, takže prvok vyzerá vtlačený – to je užitočné pre preliačené polia formulárov alebo stlačené tlačidlá.

Prečo vrstviť viac než jeden tieň?

Jeden tieň vyzerá od určitej veľkosti plocho. Reálna hĺbka zvyčajne kombinuje ostrý, tmavý tieň s jemným, širším tieňom – pridajte druhú vrstvu a dolaďte každú zvlášť, aby ste dosiahli tento efekt.

Generátor CSS Cubic BezierŤahaním dvoch tiahel vytvarujte krivku plynulosti, sledujte pohyb bodu v porovnaní s rovnomerným a skopírujte hodnotu cubic-bezier().Generátor gradientov (prechodov farieb)Vytvorte lineárny, radiálny alebo kónický gradient, pridajte farebné body, nastavte smer a skopírujte CSS jedným kliknutím.Generátor zaoblenia rohov (Border Radius)Zaobľujte rohy pomocou posuvníkov, vytvárajte organické tvary v eliptickom režime a okamžite kopírujte CSS.Generátor FlexboxuNastavte flex kontajner a jeho položky pomocou vizuálnych prvkov, sledujte zmeny v reálnom čase a skopírujte CSS jedným kliknutím.Generátor CSS GridNastavte stĺpce a riadky, ťahaním cez bunky umiestnite položky a jedným kliknutím skopírujte CSS mriežky spolu s HTML kódom.Kalkulačka CSS clamp()Zadajte veľkosť pre malé a veľké obrazovky a získajte fluidnú hodnotu clamp(), ktorá sa medzi nimi plynule prispôsobí – pre veľkosť písma, padding, margin či gap.Prevodník fariebKonvertujte farby medzi HEX, RGB, HSL, HSV, CMYK a LAB – upravte jedno pole a ostatné sa okamžite prispôsobia.CSS Beautifier & MinifierUpravte odsadenie neprehľadného CSS pre lepšiu čitateľnosť alebo ho minifikujte pre rýchlejšie načítanie – s bezpečným režimom, ktorý nikdy nezmení poradie vašich pravidiel.Kontrola kontrastu (Contrast Checker)Zadajte farbu textu a pozadia a zistite kontrastný pomer WCAG spolu s vyhovujúcimi úrovňami AA a AAA.