이렇게 사용하세요
프리셋 중 하나를 눌러 시작하거나, 기본 예시에서 바로 색을 바꿔 보세요. 색 지점마다 색상 상자와 위치 슬라이더가 있고, "색 지점 추가"를 누르면 가장 넓게 빈 자리의 가운데에 양옆 색을 섞은 새 지점이 생겨요. 종류를 Radial로 바꾸면 원형, Conic으로 바꾸면 시계 방향으로 도는 그라디언트가 돼요. 결과 CSS는 background 속성으로 복사돼요.
그라디언트 문법
linear-gradient(135deg, 색 0%, 색 100%)각도 방향으로 색이 바뀌어요. 0deg는 아래에서 위, 90deg는 왼쪽에서 오른쪽이에요.radial-gradient(circle at center, …)중심에서 바깥으로 퍼져요. ellipse는 상자 비율에 맞춘 타원이에요.conic-gradient(from 0deg at center, …)중심을 축으로 한 바퀴 돌며 바뀌어서 원그래프나 색상환을 만들 때 좋아요.
Tailwind CSS에서는 대괄호 임의 값으로 그대로 쓸 수 있어요. 클래스 안에는 공백을 넣을 수 없어서 공백을 밑줄(_)로 바꾸고 쉼표 뒤 공백을 없앤 형태로 만들어 드려요.
자주 묻는 질문
두 색 사이가 탁한 회색으로 보여요.
보색끼리 이으면 가운데가 탁해지기 쉬워요. 가운데에 두 색 사이의 밝은 중간색 지점을 하나 넣으면 훨씬 선명해져요.
경계가 딱 끊기는 줄무늬를 만들 수 있나요?
네. 두 지점을 같은 위치(예: 50%와 50%)에 두면 부드럽게 섞이지 않고 경계가 선명하게 나뉘어요.
글자에 그라디언트를 입히려면요?
복사한 background에 -webkit-background-clip: text;와 color: transparent;를 함께 주면 글자 모양으로 잘려 보여요.