「가운데 안 죽게 섞기」가 뭔가요?

두 색을 그냥 섞으면 가운데가 탁해집니다. 파랑에서 노랑으로 갈 때 중간이 회색을 지나는 것이 대표적입니다. 화면 색은 눈에 보이는 밝기와 비례하지 않기 때문인데, 그 왜곡을 걷어 내고 섞으면 그 일이 없습니다. 비교 줄에서 두 방식을 나란히 볼 수 있습니다.

「여러 단계로 부드럽게」는 언제 켜나요?

넓은 배경에 쓸 때 켜면 띠가 덜 보입니다. 중간 색을 여러 개 끼워 넣는 방식이라 CSS 가 길어집니다.

그 요소의 background 로 넣으면 됩니다. 복사한 값에 background: 까지 들어 있습니다.

Name: 그라데이션 만들기
Author: KarmoLab

실시간 미리보기 · 직선·퍼짐 · 방향 조절 · 탁함 비교 · CSS 복사

배경용 그라데이션을 보면서 만들고 CSS 를 가져갑니다. 가운데가 탁해지지 않게 섞습니다

시작 색

끝 색

방향 135°

모양

가운데 안 죽게 섞기 여러 단계로 부드럽게

비교 — 위가 그냥 섞기, 아래가 눈에 맞춘 섞기

CSS

가운데가 #989081 → #b891b5 로 달라집니다. 그냥 섞으면 그만큼 탁해집니다.

배경에 쓸 그라데이션을 보면서 만들고 CSS 를 그대로 가져갑니다. 가운데 색이 탁해지지 않게 섞습니다.

이렇게도 부른다 — gradient · linear

「가운데 안 죽게 섞기」가 뭔가요?: 두 색을 그냥 섞으면 가운데가 탁해집니다. 파랑에서 노랑으로 갈 때 중간이 회색을 지나는 것이 대표적입니다. 화면 색은 눈에 보이는 밝기와 비례하지 않기 때문인데, 그 왜곡을 걷어 내고 섞으면 그 일이 없습니다. 비교 줄에서 두 방식을 나란히 볼 수 있습니다.
「여러 단계로 부드럽게」는 언제 켜나요?: 넓은 배경에 쓸 때 켜면 띠가 덜 보입니다. 중간 색을 여러 개 끼워 넣는 방식이라 CSS 가 길어집니다.
복사한 CSS 를 어디에 넣나요?: 그 요소의 background 로 넣으면 됩니다. 복사한 값에 background: 까지 들어 있습니다.

기기 안에서만 넣은 내용은 브라우저 안에서만 처리되며 어디에도 저장·전송되지 않습니다.