Generátor CSS gradientů
Vygenerujte CSS gradient kód stačí vybrat barvu a úhel – s náhledem v reálném čase
Vlastnosti
Náhled a kód se aktualizují současně
Pokaždé, když změníte barvu či úhel, vzhled i CSS se změní v reálném čase
Podpora lineárních, radiálních a kónických gradientů
Podrobné nastavení úhlu, tvaru a středové polohy pro každý typ
Až 10 barev s možností přetažení
Polohu barvy upravujte přetažením po pruhu, průhlednost nastavte posuvníkem
8 předvoleb a náhodné generování
Začněte s typickými barevnými schématy nebo náhodně vygenerovanými a potom dolaďte
Jak na to
Vyberte typ
Zvolte lineární, radiální nebo kónický gradient
Nastavte barvy
Vyberte barvu podle kódu nebo předvolby, přidejte barvy tlačítkem „Přidat barvu" a upravte jejich pozici a průhlednost
Upravte směr
U lineárních gradientů nastavte úhel nebo směr tlačítky, u radiálních a kónických určete středovou polohu
Zkopírujte kód
Klikněte na tlačítko „Kopírovat" a jednořádkový CSS vložte do svého stylu
Případy použití
Vytvoření pozadí heroického obrázku
Nastavte barvu pozadí úvodní stránky nebo tlačítka bez psaní kódu
Volba barev pro nadpisy blogu
Vyberte z předvoleb podobné barevné schéma a upravte pozadí nadpisu článku
Překryvný filtr nad fotografií
Vytvořte poloprůhlednou vrstvu nad fotografií snížením průhlednosti
Úprava vícebarevného gradientu
Postupně přetažením upravujte pozice hranic mezi třemi a více barvami
Základní znalosti
Rozdíly mezi linear, radial a conic
CSS má tři funkcí gradientu s různými způsoby změny barev. Všechny se používají v vlastnosti background.
- linear-gradient：linear-gradient vytváří lineární gradient, kde se barva mění podél přímky v určeném úhlu.
- radial-gradient：radial-gradient vytváří kruhový gradient, kde se barva šíří od středu ven v kruhu nebo elipse.
- conic-gradient：conic-gradient vytváří kónický gradient, kde se barva mění po kruhu kolem středu ve směru hodinových ručiček.
Odpovídající si úhly a směrové klíčové slovo
U linear-gradient je 0deg směr zdola nahoru a hodnota se zvětšuje ve směru hodinových ručiček. Úhel můžete zapsat i klíčovým slovem jako „to right"; 90deg odpovídá „to right" a 180deg odpovídá „to bottom".
Barevné zarážky a zápis průhlednosti
Barevná zarážka (color stop) je místo v gradientu, kde se má určitá barva objevit. 0% znamená začátek a 100% konec. Například „#3B82F6 0%, #8B5CF6 100%" specifikuje přechod z modré na fialovou.
- Formát #RRGGBB：Formát #RRGGBB vyjadřuje barvu pomocí šestnáctkových číslic (0–F) pro červenou, zelenou a modrou složku; #FF0000 znamená neprůhlednou červenou.
- Formát rgba：Formát rgba obsahuje hodnoty RGB (0–255) a průhlednost (0–1); průhlednost 0,5 znamená 50% viditelnost.
Bezpečnost a soukromí
Vše v prohlížeči
Vstupní data jsou zpracována pouze ve vašem prohlížeči a nejsou odesílána ven.
Zpracování pouze v prohlížeči
Generování kódu gradientu se provádí výhradně v rámci vašeho prohlížeče a vstupní data se neposílají na server.
Komunikace šifrována pomocí HTTPS
Načítání stránky je také šifrováno pomocí TLS a třetí strany nemohou přečíst obsah.
Bez odesílání třetím stranám
Vstupní data se neposílají externím službám, jako jsou reklamní sítě nebo sledovací služby.
Bez automatického ukládání výsledků
Vybrané barvy a nastavení a navrhované vstupy se neukládají na serveru.
Sledujte RAKKOTOOLS v Googlově vyhledávání
185 užitečných nástrojů je snadnější najít v Googlově vyhledávání a vyhledávání AI!
- Nalezení ve vyhledávání
- Také se zobrazí ve vyhledávání AI
- Objevujte nové nástroje
Informace o aktualizacích
- update #312
Přidán generátor CSS gradientů, vyberte barvu a úhel pro generování kódu