css gradient

문서

mozilla linear-gradient

    /* 45도로 기울어진 파랑 시작 빨강 종료 그레이디언트 */
    linear-gradient(45deg, blue, red);

    /* 우하단에서 좌상단으로, 파랑 시작 빨강 종료 그레이디언트 */
    linear-gradient(to left top, blue, red);

    /* 색상 정지점: 아래에서 위로,
    파랑에서 시작해 길이의 40%에서 초록으로,
    빨강 종료 그레이디언트 */
    linear-gradient(0deg, blue, green 40%, red);

    /* 색상 힌트: 왼쪽에서 오른쪽으로,
    빨강에서 시작해 길이의 10% 지점에서 중간 색상으로,
    나머지 90% 길이 동안 파랑으로 변하는 그레이디언트 */
    linear-gradient(.25turn, red, 10%, blue);

    /* 다중 위치 색상 정지점: 45도 기울어진,
    좌하단 절반 빨강, 우상단 파랑 절반에
    두 색이 만나는 지점을 정확히 나누는 그레이디언트 */
    linear-gradient(45deg, red 0 50%, blue 50% 100%);

예시

CSS 그레이디언트 사용하기

관련 서비스

https://cssgradient.io/

• editor 를 조작하여 실시간으로 볼 수 있다
• css 를 copy 할 수 있다