CSS 그라데이션
선형, 원형, 원뿔형 그라데이션을 색 정지점을 끌어서 만들고, 완성된 CSS 코드를 복사해요. 바로 쓸 수 있는 프리셋도 있어요.
막대를 누르면 색 정지점이 생겨요. 정지점을 끌어서 위치를 바꾸세요.
프리셋
설정
%
사용 방법
1종류 고르기선형, 원형, 원뿔형 중에 고르고 각도나 중심 위치를 정해요.
2색 정하기막대 위 정지점을 눌러 색과 위치, 투명도를 바꿔요. 막대를 누르면 정지점이 추가돼요.
3코드 복사완성되면 CSS 코드를 복사해 background 속성에 붙여 넣어요.
이런 때 쓰면 좋아요
그라데이션은 배경, 버튼, 배너에 깊이감을 주는 가장 쉬운 방법이에요. 하지만 linear-gradient의 각도와 정지점 위치를 코드로만 맞추다 보면 원하는 느낌이 나올 때까지 저장과 새로고침을 수없이 반복하게 돼요.
이 도구는 화면에서 색 정지점을 끌어 바로 결과를 보고, 마음에 들면 코드를 복사하는 방식이에요. 정지점마다 투명도를 줄 수 있어서 사진 위에 어둡게 깔리는 오버레이도 만들 수 있어요. 원뿔형(conic)은 원형 차트나 색상환 같은 표현에 써요.
프리셋은 출발점으로 쓰기 좋은 조합을 모아 둔 거예요. 하나를 고른 뒤 색만 바꿔서 내 브랜드 색에 맞춰 보세요.
자주 묻는 질문
만든 코드는 어디에 붙이나요?
CSS에서 background 또는 background-image 속성 값으로 넣으면 돼요. 예: .box { background: linear-gradient(...); }
원뿔형은 모든 브라우저에서 되나요?
최신 크롬, 엣지, 사파리, 파이어폭스는 모두 지원해요. 아주 오래된 브라우저에서는 보이지 않을 수 있어요.
글자에 그라데이션을 넣을 수 있나요?
네. 만든 값을 background에 넣고 -webkit-background-clip: text; color: transparent; 를 함께 쓰면 글자에 그라데이션이 입혀져요.
정지점은 몇 개까지 되나요?
제한은 없어요. 다만 너무 많으면 코드가 길어지니 보통 2~5개면 충분해요. 2개 미만으로는 지울 수 없어요.