그라디언트 만들기
색과 각도를 정하면 CSS linear-gradient 코드를 만들어 줍니다. 색 위치를 조절해 어디서 색이 바뀔지 정할 수 있고, 결과는 그대로 붙여 넣어 쓸 수 있습니다.
🎨 계산은 전부 브라우저 안에서 끝납니다. 저장도 전송도 없습니다.
각도135°
프리셋
background: linear-gradient(135deg, #8b5cf6, #0ea5e9);
그라디언트 위에 글자를 얹을 때는 가장 밝은 지점과 가장 어두운 지점 양쪽에서 대비를 확인해야 합니다. 한쪽에서만 맞추면 반대쪽에서 글자가 사라집니다.
이 도구로 할 수 있는 것
- 색 두세 개와 위치 조절
- 각도·방사형 선택
- CSS 코드 즉시 복사
- Tailwind 클래스 안내
자주 묻는 질문
Q. 그라디언트 위에 글자를 얹어도 되나요?
가장 밝은 지점과 가장 어두운 지점 양쪽에서 대비를 확인해야 합니다. 한쪽에만 맞추면 반대쪽에서 글자가 사라집니다. 불안하면 글자 뒤에 반투명 판을 깔아 주세요.
Q. 중간에 띠처럼 경계가 보입니다.
색 밴딩이라고 하며, 비슷한 색 사이를 넓은 면적에 펼칠 때 화면이 표현할 수 있는 단계가 모자라 생깁니다. 색 차이를 조금 키우거나 미세한 노이즈를 얹으면 덜 보입니다.
다른 색상 도구
화면마다 색 표현이 조금씩 달라, 같은 값도 기기에 따라 다르게 보일 수 있습니다.