Jak použít
- V části Typ vyberte Lineární, Radiální nebo Kuželový.
- Pro Lineární a Kuželový nastavte Úhel, pro Radiální vyberte Tvar. U Radiálního a Kuželového gradientu zvolte také Pozice.
- V části Barevné body zadejte barvy v hexadecimálním zápisu.
- Tlačítkem + Přidat barevný bod přidejte další barvu.
- Přetažením značek na pruhu nad CSS kódem upravte rozložení barev, případně je posouvejte klávesnicí. Změny sledujte v živém náhledu.
Příklady
Průhledný překryv fotografie
Lineární, 180° · #172554 na 0 % s neprůhledností 0 % · #172554 na 100 % s neprůhledností 90 %
background: linear-gradient(180deg, rgba(23, 37, 84, 0) 0%, rgba(23, 37, 84, 0.9) 100%);
Pozadí záhlaví e-shopu
Radiální, Elipsa, vlevo nahoře · #FEF3C7 na 0 % · #F59E0B na 45 % · #92400E na 100 %
background: radial-gradient(ellipse at top left, #FEF3C7 0%, #F59E0B 45%, #92400E 100%);
Šikmé pruhy pro informační panel
Lineární, 45°, Opakovaný · #FFFFFF na 0 % a 10 % · #DBEAFE na 10 % a 20 %
background: repeating-linear-gradient(45deg, #FFFFFF 0%, #FFFFFF 10%, #DBEAFE 10%, #DBEAFE 20%);
Tipy
- Vyberte přesné barvy a zkontrolujte kontrast v nástroji HTML barvy a kódy barev.
- Vyzkoušejte gradient na stránce v nástroji HTML editor.
Časté dotazy
Jaké kódy barev můžu zadat?
Použijte #RGB, #RGBA, #RRGGBB nebo #RRGGBBAA, případně zápis bez #. Zápisy rgb(), hsl() a názvy barev pole nepřijímá.
Proč se po změně hodnoty gradient nezměnil?
Neplatné pole se označí červeně a náhled i CSS zůstanou u posledního platného gradientu. Úhel musí být celé číslo od 0 do 360, pozice barevného bodu a neprůhlednost celé číslo od 0 do 100.
Jak zkopíruju CSS gradient do svého webu?
Klikněte na Kopírovat CSS, případně stiskněte Ctrl+Shift+C (na Macu Cmd+Shift+C), pokud nemáte vybraný text. Zkopíruje se celá deklarace background: …;, kterou vložíte do CSS pravidla daného prvku. Tlačítko Kopírovat hodnotu zkopíruje jen samotnou funkci gradientu, například linear-gradient(…), pro inline styl nebo designové tokeny.
Zůstane můj gradient uložený i po zavření stránky?
Poslední platné nastavení se ukládá do localStorage ve vašem prohlížeči a při další návštěvě se obnoví. Tlačítko Obnovit uložené nastavení smaže a vrátí výchozí gradient.