어디에 쓰나요?
개인 홈페이지의 배경, 작은 배너, 프로토타입의 색 분위기를 빠르게 비교할 때 사용하세요. 결과는 배경색 코드이며 이미지 파일이 아닙니다.
A little color, a different mood
색을 섞어,
배경을 만들어요.
색 두 개로 시작해 보세요. 각도와 가운데 색을 조절하면 바로 쓸 수 있는 CSS 레시피가 완성됩니다.
배경 미리보기
LINEARYOUR CSS RECIPE · 텍스트를 선택해 복사
한 번 만들어 보기
‘살구와 여름’에서 선형 135°를 선택하세요. 3색으로 바꾸고 가운데 위치를 30%로 옮기면 첫 색의 영역이 짧아집니다. 시작과 끝 색은 각각 0%, 100%입니다.
적용 전에 확인해요
그라디언트 위 글자는 배경의 모든 구간에서 읽혀야 합니다. 이 도구는 글자 대비를 판정하지 않습니다. 표시 색은 화면 설정과 브라우저에 따라 달라질 수 있습니다.
MDN 그라디언트 문서 ↗