CSS 그라데이션 생성기
색 지점과 각도를 정하면 그라데이션 CSS 코드가 바로 만들어져요.
입력한 글과 파일은 서버로 보내지 않고 이 브라우저 안에서만 처리해요.
색 지점
막대 빈 곳을 누르면 지점이 생기고, 손잡이를 끌면 위치가 바뀌어요.
CSS 코드
첫 줄 background-color 는 그라데이션을 못 그리는 환경을 위한 평균색이에요.
사용 방법
- 종류(선형·원형·원뿔)를 고르고 각도나 중심 위치를 정하세요.
- 막대 빈 곳을 누르거나 「지점 추가」로 색 지점을 늘리고, 손잡이를 끌거나 % 칸에 숫자를 넣어 위치를 바꾸세요.
- 지점마다 색 칸으로 색을 고르거나 #rrggbbaa 처럼 투명도까지 넣을 수 있어요.
- 「CSS 코드」를 복사해 붙여 넣으세요. 「무작위」로 새로운 조합을 구경할 수도 있어요.
자주 묻는 질문
linear·radial·conic 은 어떻게 다른가요?
linear 는 한 방향으로, radial 은 중심에서 바깥으로 둥글게, conic 은 중심을 돌며 시계 방향으로 색이 바뀌어요. conic 은 원형 차트나 색상환에 잘 맞아요.
각도 0deg 는 어느 방향인가요?
linear-gradient 에서 0deg 는 아래에서 위로, 90deg 는 왼쪽에서 오른쪽으로 바뀌어요. conic 은 0deg 가 12시 방향에서 시작해요.
오래된 브라우저에서도 보이나요?
linear·radial 은 거의 모든 브라우저, conic 은 2020년 이후 브라우저에서 돼요. 그리지 못하는 환경에서는 함께 넣은 background-color 가 보여요.