Co je to CSS Linear Gradient?
V dobách raného webdesignu se musely barevné přechody řešit tak, že grafik vytvořil dlouhý obrázek v Photoshopu, který se pak nastavil jako pozadí stránky. To zpomalovalo načítání a dělalo problémy při responzivním designu. Dnes nám CSS nabízí vlastnost linear-gradient(), která tento proces řeší čistě pomocí kódu a matematiky přímo ve vašem prohlížeči.
Jak funguje syntaxe?
Syntaxe pravidla linear-gradient se skládá ze tří hlavních částí:
- Úhel (Direction): Určuje směr přechodu. Lze jej zapsat ve stupních (např.
90degpro zleva doprava) nebo pomocí klíčových slov (např.to right,to bottom right). - Počáteční barva: Barva, kterou přechod začíná (v našem nástroji používáme bezpečný HEX formát).
- Koncová barva: Barva, do které přechod plynule přejde.
background: linear-gradient([úhel], [barva 1], [barva 2]);
Podpora v prohlížečích
Funkce lineárního gradientu je dnes plně podporována ve všech moderních prohlížečích (Chrome, Firefox, Safari, Edge, Safari na iOS). Už dávno není potřeba používat takzvané "vendor prefixy" jako -webkit- nebo -moz-, které kód jen zbytečně prodlužovaly a znepřehledňovaly.