CSS színátmenet: linear-gradient útmutató és példák

CSS linear-gradient készítés egyszerűen: irányok, fokok, color stopok, háttérszín-átmenetek és interaktív színátmenet generátor.

Balogh Bence

8 perc

A CSS gradient képfájl nélkül hoz létre folyamatos színátmenetet. Reszponzív, éles marad minden felbontáson, és néhány karakterrel teljes hero vagy kártyaháttér építhető belőle.

Ha vizuálisan szeretnél kísérletezni, állítsd össze az átmenetet a generátorral.

Színátmenet generátor→

A linear-gradient szintaxisa

A legegyszerűbb forma két színt ad meg. Irányt kulcsszóval vagy fokban is megadhatsz; például 90deg balról jobbra, 180deg fentről lefelé haladó érzetet ad.

Color stopok

A színekhez pozíció rendelhető, például 0%, 40% és 100%. Ezzel szabályozható, hol kezdjen dominálni egy árnyalat és milyen gyors legyen az átmenet.

Kontraszt szöveg alatt

A gradient nehezebb kontraszteset, mert a háttér világossága helyenként változik. Szövegnél a legrosszabb kontrasztú területet is érdemes figyelembe venni.

Az alap színeket a színkód generátorban HEX, RGB és HSL formában is megkapod.

Színkód generátor→

Összefoglalás

A jó gradient ritkán attól jó, hogy sok színt tartalmaz. Két jól megválasztott végpont, megfelelő irány és kontrollált kontraszt általában tisztább UI-t ad.

Gyakori kérdések

Hogyan készül CSS színátmenet?

A background vagy background-image tulajdonságban linear-gradient() függvénnyel.

Megadható fokban az irány?

Igen. Például 135deg átlós átmenetet ad.

Lehet három vagy több szín?

Igen. A linear-gradient tetszőleges számú color stopot támogat.