이전엔 잘 안쓰고 이미지로 대체하던 부분이였는데 그 땐 지원하는 브라우저가 몇개 안되서 구석에 놔두고 있다가 근래에 들어서 그 편리함에 많이 쓰고 있다.
문제가 생기거나 외관상으로 심하게 차이가 나는 경우는 사이드 이펙트로 별도 처리를 한다.
시작은 background-image로 한다.
linear-gradient는 옵션으로 방향, 색깔1, 색깔2를 알맞게 기입하면 된다.
background-image:linear-gradient( blue, red); 시 기본값은 위에서 아래로
왼쪽에서 오른쪽으로 뿌릴때는
linear-gradient( to right, blue, red);
색깔은 두가지 이상도 할 수 있다.
background-image: linear-gradient(to left, blue, #fff, #000, grey, blue, indigo, red);
rgba를 활용하여 알파값을 줄 수도 있다.
linear-gradient( rgba(255, 0,0,0), rgba(255,0,0,1) );
repeating-linear-gradient로 패턴처럼 쓸 수 있다.
패턴은 조그만 이미지를 반복으로 돌려서 사용 빈도는 높지 않으나 그래도 간간히 쓰이긴 한다.
그 밖에 radial-gradient도 활용하면 된다.