Nemakej v korporátu a přidej se k nám!

Působivé obarvení textu pomocí gradientu

05.04.2023

Zajímavým způsobem, jakým zpestřit vizuální vzhled našeho webového projektu, může být použití gradientu. V tomto článku popíšeme, jak nastavit gradient jako barvu textu, a také jak jej rozhýbat pomocí animace. 

Použití gradientu jako barvy textu

K nastavení barvy textu obvykle používáme CSS vlastnost color, kterou ale nelze použít pro nastavení gradientu. Využijeme proto tohoto triku za použití těchto CSS vlastností: 

  • background-image pro nastavení gradientu na pozadí textu 
  • background-clip pro inverzi gradientu tak, aby se vykreslil v textu, místo za ním
  • color pro nastavení barvy textu na transparentní, aby bylo nastavené gradientové pozadí textu vidět. 

Vlastnost background-image definujeme pomocí hodnoty linear-gradient, jehož první hodnota definuje směr gradientu (v příkladu jej máme nastaven na 45°), a následující hodnoty definují barvy použité v gradientu. 

Vlastnosti background-clip definujeme hodnotu text

Nakonec nastavíme vlastnost color: transparent


See the Pen gradient 1 by webnode.dev (@WebnodeDev) on CodePen.

Nastavení změny gradientu na hover

Barvu textu obvykle můžeme animovat pomocí vlastnosti transition s hodnotou color. Pro gradient ale toto řešení použít nemůžeme, protože pro vlastnost background-image vlastnost transition nefunguje. Můžeme ale animovat pozici gradientu. 

Budeme postupovat takto: 

  1. nejdříve pomocí vlastnosti background-size: 400% zvětšíme velikost gradientu 
  2. nastavíme pozici gradientu na jednu stranu pomocí background-position: left
  3. definujeme transition: background-position, čímž řekneme, že budeme chtít animovat pozadí textu. 
  4. pro hover na prvek změníme pozici gradientu z levé strany na pravou, pomocí background-position: right


See the Pen gradient 2 by webnode.dev (@WebnodeDev) on CodePen.

Nastavení změny gradientu pomocí časované animace

Pro takto definovaný gradient můžeme nastavit i časovanou animaci. 

  1. stejně jako v předchozím příkladu zvětšíme pozadí pomocí background-size: 400%
  2. definujeme animaci pozice gradientu pomocí keyframes a vlastnosti animation s těmito hodnotami: 
  • název animace

  • doba běhu animace

  • klíčové slovo infinite, které zajistí, že se animace bude opakovat do nekonečna

  • klíčové slovo alternate, které vyřeší přeskakování mezi stavy animace.


See the Pen gradient 3 by webnode.dev (@WebnodeDev) on CodePen.

Podpora prohlížečů

U vlastnosti background-clip si musíme pohlídat podporu prohlížečů. Jak je vidět na screenshotu níže, podpora této vlastnosti v běžných prohlížečích je vysoká. Ve Firefoxu ji můžeme použít bez problému, pro prohlížeče Chrome a Edge stačí použít prefix -webkit. Jen v prohlížeči Internet Explorer vlastnost nebude fungovat, ale to už nás trápit nemusí 😁😎🤗 

Za Webnode Jana Urbanková