CSS 그라디언트 생성기 소개

그라디언트는 색을 두 개 이상 늘어놓고 그 사이를 자연스럽게 잇는 배경입니다. 문법 자체는 어렵지 않지만 각도 90도가 어느 쪽으로 흐르는지, 스탑을 30%에 두면 색이 어디서 갈리는지는 눈으로 봐야 감이 옵니다. 이 도구는 맨 위의 넓은 미리보기 띠에 지금 만든 그라디언트를 그대로 칠해 두고, 아래 조작부를 건드릴 때마다 그 띠와 코드가 함께 바뀌도록 되어 있습니다.

형태는 선형(linear)과 원형(radial) 두 가지입니다. 선형을 고르면 각도 슬라이더가 나타나 0도에서 360도까지 흐르는 방향을 돌릴 수 있고, 원형을 고르면 각도 조절이 사라지고 가운데에서 바깥으로 퍼지는 원형 그라디언트가 만들어집니다. 색상 스탑은 처음에 두 개가 놓여 있는데, 색상 추가 버튼으로 얼마든지 늘릴 수 있고 셋 이상일 때만 각 줄에 삭제 버튼이 생깁니다.

스탑 한 줄은 색상 견본, 직접 입력하는 HEX 칸, 그리고 0~100 사이의 위치(%) 칸으로 이루어집니다. 위치는 띠의 어디쯤에서 그 색이 진해지는지를 뜻하고, 두 색을 20%와 30%처럼 가깝게 붙이면 부드러운 번짐 대신 거의 경계선에 가까운 띠가 만들어집니다. 어디서부터 손대야 할지 막막할 때는 랜덤 버튼을 눌러 보세요. 스탑 개수는 유지한 채 색과 각도만 새로 뽑아 주므로 시작점을 잡기 좋습니다.

사용 방법

1. 선형과 원형 중 원하는 형태를 고릅니다.
2. 선형이라면 각도 슬라이더로 흐르는 방향을 정합니다.
3. 스탑 줄에서 색을 고르고 위치(%)를 조정합니다. 색이 더 필요하면 색상 추가를 누릅니다.
4. 마음에 들 때까지 랜덤으로 후보를 뽑아 보며 다듬습니다.
5. CSS 복사를 눌러 background: …; 한 줄을 가져갑니다.