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.

Typ gradientu
Farebné body
CSS
Upravte body a smer na vytvorenie gradientu.

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

Časté otázky

Aký je rozdiel medzi lineárnym, radiálnym a kónickým gradientom?

Lineárny gradient prelína farby pozdĺž priamky, ktorú nasmerujete pomocou uhla. Radiálny gradient ich šíri smerom von zo stredu v tvare kruhu alebo elipsy. Kónický gradient ich otáča okolo stredu podobne ako farebné koleso.

Čo sú farebné body (color stops)?

Každý farebný bod (stop) predstavuje farbu priradenú k určitej pozícii pozdĺž gradientu – 0 % na začiatku, 100 % na konci. Posunutím bodu zmeníte miesto, kde farba dosahuje svoj vrchol, alebo pridajte viac bodov pre bohatšie prelínanie. Môžete použiť až osem bodov.

Ako môžem ovládať smer?

Pri lineárnom alebo kónickom gradiente určuje smer posuvník uhla – 0° smeruje nahor, 90° doprava. Radiálny gradient nemá uhol; namiesto toho si vyberte tvar kruhu alebo elipsy na zmenu spôsobu jeho šírenia.

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 tieňov (Box Shadow)Nastavte tieň pomocou posuvníkov, vrstvite tiene pre dosiahnutie hĺbky a okamžite skopírujte hotové CSS.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.