CSS 그라데이션 생성기

그라데이션은 색이 아니라 이미지입니다

CSS 그라데이션은 linear-gradient, radial-gradient, conic-gradient 함수가 만들어 내며, 각각은 색상이 아니라 이미지 값을 생성합니다. 이 한 가지 사실이 그라데이션이 어떻게 동작하는지 대부분을 설명합니다. 결과가 이미지이기 때문에, 이미지를 받는 속성, 대개는 background나 background-image에 할당하며, 다른 모든 배경처럼 타일로 깔리고, 크기가 조정되고, 겹쳐 쌓입니다. 또한 고유한 크기가 없어 자신이 들어가는 박스를 무엇이든 채우는데, 그래서 같은 그라데이션이 버튼에서는 가팔라 보이고 히어로 섹션을 가로질러서는 완만해 보일 수 있습니다.

선형 그라데이션과 방향

선형 그라데이션은 곧은 축을 따라 색을 섞습니다. 그 축은 각도로 정하거나 키워드 방향으로 정합니다. 각도는 똑바로 위에서부터 시계 방향으로 측정하므로, 0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로, 180deg는 위에서 아래로 흐릅니다. to right나 to bottom right 같은 키워드 형태는 간단한 경우에 더 명확할 때가 많고, 박스 모양이 바뀌어도 고정 각도로는 할 수 없는, 모서리를 정확히 가리킨다는 장점이 있습니다.

이 도구의 각도 슬라이더가 그 도 값을 대신 적어 줍니다. 한 가지 미묘한 팁: 135deg 언저리쯤 살짝 대각선으로 흐르는 그라데이션은 평평한 수직이나 수평 혼합보다 거의 언제나 더 세련되어 보이는데, 눈이 그 대각선을 표면을 비스듬히 스치는 빛으로 읽기 때문입니다.

방사형과 원뿔형 그라데이션

방사형 그라데이션은 중심점에서 동심원을 이루며 바깥으로 색을 섞는데, 이는 스포트라이트, 부드러운 비네트, 광채에 이상적입니다. 기본적으로는 박스를 채우는 타원을 이루지만, 완전한 원으로 만들고 중심을 옮길 수 있어, 강조점이 정중앙이 아니라 모서리에 자리할 수도 있습니다. 빛이나 초점이 한 점에서 나오는 것처럼 보여야 할 때면 방사형 그라데이션이 자연스러운 선택입니다.

원뿔형 그라데이션은 중심에서 바깥으로 퍼지는 대신, 시곗바늘처럼 중심을 돌며 색을 훑습니다. 그 회전하는 훑기가 바로 원뿔형 그라데이션을 파이 차트, 색상환, 그리고 카드 강조에 점점 흔히 쓰이는 원뿔형 광채의 바탕으로 만드는 것입니다. 이미 익숙한 같은 색상 정지점이 그대로 적용되며, 선형과 방사형, 원뿔형 사이에서는 그것들이 배치되는 기하학만 달라집니다.

색상 정지점과 위치

모든 그라데이션은 색상 정지점으로 정의되며, 각 정지점은 색과, 그라데이션 선을 따르는 선택적 위치로, 보통 0부터 100까지의 백분율로 적습니다. 정지점이 두 개면 단순한 혼합이 나오고, 더 추가하면 그라데이션을 여러 색으로 거쳐 가게 할 수 있습니다. 위치를 생략하면 브라우저가 정지점을 고르게 분포시키지만, 직접 설정하는 것이 각 색이 정확히 어디에 자리하고 각 전환이 얼마만큼의 공간을 차지하는지를 제어하는 방법입니다.

위치가 매끄럽게 증가할 필요는 없으며, 바로 거기서 그라데이션이 흥미로워집니다. 두 정지점을 바짝 모으면 빠른 전환이 되고, 멀리 벌리면 느리고 완만한 전환이 됩니다. 심지어 두 정지점에 같은 위치를 주어 혼합을 완전히 없앨 수도 있는데, 이것이 다음 기법의 핵심입니다.

하드 스톱: 줄무늬, 띠, 그리고 도형

인접한 두 색상 정지점이 같은 위치를 공유하면, 그 사이의 전환이 거리 0에 걸쳐 일어나 혼합 대신 또렷한 경계가 만들어집니다. 그 패턴을 반복하면 줄무늬, 체크무늬, 진행 막대, 색으로 구분된 띠를 모두 이미지 없이 CSS만으로 그릴 수 있습니다. 예를 들어, 0부터 50퍼센트까지 한 색을 유지하고 50부터 100퍼센트까지 두 번째 색을 유지하는 그라데이션은 가운데를 기준으로 깔끔하게 둘로 나뉜 투톤을 만들어 줍니다.

하드 스톱을 repeating-linear-gradient나 repeating-radial-gradient와 짝지으면 패턴이 박스 전체에 자동으로 타일로 깔리므로, 단 한 줄의 짧은 선언으로 사탕 줄무늬, 대각선 경고 테이프, 가는 안내선을 만들 수 있습니다. 비트맵이 아니라 벡터 연산이기 때문에 어떤 크기에서도, 어떤 픽셀 밀도에서도 칼같이 선명하게 유지됩니다.

투명도와 겹치기

그라데이션 정지점은 알파 채널이 있는 색을 쓸 수 있으며, 완전히 투명한 색으로 사라지게 하는 것은 할 수 있는 가장 유용한 동작 중 하나입니다. 단색에서 투명으로 흐르는 그라데이션은 사진 하단 텍스트 뒤의 스크림, 스크롤되는 목록 가장자리의 페이드아웃, 부드러운 이미지 마스크를 만들어 냅니다. 한 가지 주의점: 일부 색 보간에서는 순수한 투명으로 사라질 때 칙칙한 회색 중간점을 지날 수 있으므로, 맨 투명 키워드로 가는 대신 같은 색을 알파 0으로 두고 사라지게 하면 더 깨끗한 결과가 나옵니다.

그라데이션은 이미지이기 때문에, background 속성은 쉼표로 구분된 여러 개를 받아들여 앞에서 뒤로 칠합니다. 은은한 투명 그라데이션을 바탕 그라데이션 위에 쌓는 것이 이미지 파일 하나 없이 풍부한 최신 배경을 만드는 방법입니다.

접근성: 그라데이션 위의 텍스트

그라데이션의 위험은 텍스트 아래에 자리합니다. 대비는 그라데이션의 한쪽 끝에서는 완벽하다가도 반대쪽 끝에서는 심하게 무너질 수 있어서, 어두운 부분 위에서는 읽히던 제목이 밝은 부분 위에서는 사라질 수 있습니다. 평균이 아니라 항상 최악의 영역을 확인하세요. 견고한 해결책은 어수선한 배경과 텍스트 사이에 반투명한 단색 스크림이나 전용 어둠-투명 그라데이션을 두어, 대비비가 어디서나 안전하게 유지되도록 하는 것입니다. 밝은 텍스트 아래의 가장 밝은 지점과, 어두운 텍스트 아래의 가장 어두운 지점을 실제로 통과해야 하는 값으로 다루세요.