tigtools

Generátor CSS přechodů

Vyberte barvy a pozice, zvolte typ přechodu a zkopírujte CSS připravené k použití.

Běží ve vašem prohlížeči Bez registrace

Typ
135°
Barevné body
  1. Bod 1
    #0b5d1e
    0%
    100%
  2. Bod 2
    #f2c14e
    100%
    100%
Přechod zde má 2 až 6 bodů.

Jak používat

  1. Vyberte lineární, radiální nebo kuželový přechod a poté nastavte úhel nebo středovou pozici.
  2. U každého bodu nastavte barvu, krytí a pozici. Přidejte až šest bodů nebo odstraňte ty, které nepotřebujete.
  3. Zkontrolujte náhled a poté zkopírujte řádek CSS do svého stylopisu.

Jak to funguje

Výstupem je standardní deklarace pozadí v CSS. Lineární gradienty probíhají pod úhlem: 0° jde zdola nahoru, 90° zleva doprava, 180° shora dolů. Radiální gradienty se šíří od středu jako kruh nebo elipsa, která se přizpůsobí boxu. Kuželové gradienty obíhají kolem středu a začínají pod zvoleným úhlem, což se hodí pro efekty podobné koláčovým grafům a barevným kruhům.

Zarážky se zapisují v pořadí podle své pozice, takže můžete jejich pozice libovolně posouvat. Zarážka se sníženou neprůhledností se zapisuje jako rgba(), což umožní, aby pozadí prosvítalo. Dvě zarážky na stejné pozici vytvoří ostrý přechod místo plynulého míchání – tímto způsobem vznikají pruhy.

Všechny tři gradientní funkce fungují ve všech aktuálních prohlížečích. Gradienty se ve výchozím nastavení míchají v barevném prostoru sRGB, takže mezi doplňkovými barvami (například modrou a žlutou) mohou působit lehce zašedle; přidání prostřední zarážky s jasnější barvou tomu zabrání.

Příklady

Jemné pozadí záhlaví

linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) vytvoří jemný přechod shora dolů, při kterém zůstává tmavý text čitelný.

Ostré pruhy

Použijte čtyři body: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. Dva body na 50% se setkají bez prolínání a vytvoří dvě plné poloviny.

Efekt reflektoru

Radiální přechod (kruh vlevo nahoře) z rgba(255, 255, 255, 0.6) do rgba(255, 255, 255, 0) položený přes barvu vytvoří v rohu jemné světlo.

Časté dotazy

Kterým směrem jde 0deg?

V CSS ukazuje 0deg nahoru, takže přechod začíná dole a končí nahoře. 90deg jde zleva doprava. To se liší od některých návrhových aplikací, kde 0° často znamená zleva doprava.

Mohu přechod použít na text?

Ano: použijte pozadí a poté přidejte background-clip: text a color: transparent. Zkontrolujte, že text zůstává na stránce čitelný v každém místě přechodu.

Potřebuji vendor prefixy jako -webkit-linear-gradient?

Ne. Současné prohlížeče podporují syntaxi bez prefixů. Prefixy jsou potřeba jen pro mnoho let staré prohlížeče.

Soukromí

Vše se generuje ve vašem prohlížeči. Vaše barvy a nastavení se nikam neodesílají ani neukládají.