CSS 그라데이션 생성기

CSS 그라데이션은 브라우저가 즉석에서 그리는 "이미지"라서 background나 background-image에 넣기만 하면 되고, 별도 파일을 내려받지 않으며 크기를 키워도 흐려지지 않습니다. 선형 그라데이션은 linear-gradient(각도, 색 정지점1, 색 정지점2, …)로 씁니다. 0deg는 아래에서 위, 90deg는 왼쪽에서 오른쪽, 기본값 180deg는 위에서 아래이며 135deg는 많이 쓰는 왼쪽 위에서 오른쪽 아래 대각선입니다. radial-gradient는 중심에서 바깥으로 퍼져 스포트라이트, 빛 번짐, 버튼의 입체감에 좋습니다.

색 정지점은 색과 위치로 이루어지며 #f59e0b 0%, #10b981 100%처럼 씁니다. 중간에 정지점을 추가하면 전환 리듬을 조절할 수 있고, 두 정지점을 같은 위치(예: 50%와 50%)에 두면 색이 즉시 바뀌어 깔끔한 줄무늬나 분할 배경이 됩니다. 이 도구에서는 정지점마다 위치와 불투명도를 바꿀 수 있고 불투명도는 rgba()로 출력되어, 사진 위 흰 글자를 잘 보이게 하는 오버레이에 유용합니다.

실전 팁입니다. 넓은 면적의 그라데이션에서 양 끝 색상이 너무 멀면 가운데가 탁한 회색이 되기 쉬우니 중간색을 추가하거나 가까운 색상을 고르세요. 아주 옅은 그라데이션은 화면에 따라 계단 모양의 띠(밴딩)가 보일 수 있는데, 색 차이를 조금 키우거나 세 번째 정지점을 넣으면 나아집니다. 그라데이션 글자는 배경에 그라데이션을 넣고 background-clip: text와 color: transparent를 함께 쓰면 됩니다.

주요 브라우저는 오래전부터 접두사 없는 linear-gradient와 radial-gradient를 지원하므로 복사한 CSS는 -webkit- 없이 그대로 쓸 수 있습니다. 프리셋에서 시작해 각도와 정지점을 다듬고 실시간 미리보기로 확인한 뒤 한 번에 복사하세요.