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.

Typ přechodu
Barevné body
CSS
Upravte body a směr pro vytvoření přechodu.

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

Časté dotazy

Jaký je rozdíl mezi lineárním, radiálním a kónickým přechodem?

Lineární přechod (linear) prolíná barvy podél přímky, kterou nasměrujete pomocí úhlu. Radiální přechod (radial) je šíří ze středu ven v kruhu nebo elipse. Kónický přechod (conic) je obtáčí kolem středu jako barevné kolo.

Co jsou to barevné body (stops)?

Každý barevný bod (stop) je barva ukotvená k určité pozici na přechodu – 0 % na začátku, 100 % na konci. Posunutím bodu změníte místo, kde daná barva vrcholí, nebo přidejte další body pro bohatší prolnutí. Použít jich můžete až osm.

Jak mohu ovlivnit směr přechodu?

U lineárního nebo kónického přechodu určuje směr posuvník úhlu – 0° směřuje nahoru, 90° doprava. Radiální přechod úhel nemá; místo toho zvolte tvar kruhu nebo elipsy, čímž změníte způsob jeho šíření.

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 box-shadowTaž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.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í.