CSS 그라디언트 생성기
색과 각도를 조절해 그라디언트와 그림자를 만들고 CSS 코드를 그대로 복사해요.
모양
색 스톱
색과 위치를 바꾸면 미리보기가 바로 따라와요.
프리셋
미리보기
코드를 누르면 복사돼요.
CSS 속성 한 줄로 그대로 붙여 넣을 수 있어요.
CSS 그라디언트 생성기 소개
색과 각도를 조절해 CSS 그라디언트와 그림자를 만들고 코드를 그대로 복사해요. 선형·원형·원뿔형 중에 고르고 색 스톱을 원하는 만큼 더할 수 있어요. 그림자는 여러 겹을 쌓고 안쪽 그림자도 만들 수 있어서 카드나 버튼 스타일을 그대로 뽑아 쓰기 좋아요.
세 가지 그라디언트
선형은 한 방향으로 색이 흐르는 형태예요. 가장 많이 쓰이고 배경이나 버튼에 무난해요. 각도로 방향을 정해요.
원형은 한 점에서 퍼져 나가요. 조명이 비치는 느낌이나 부드러운 배경을 만들 때 어울려요. 원과 타원 중에 고를 수 있어요.
원뿔형은 중심을 기준으로 색이 빙 돌아요. 원형 차트나 색상환 같은 표현에 쓰여요. 같은 색을 시작과 끝에 두면 이음매 없이 이어져요.
색이 탁해지는 이유
보색에 가까운 두 색을 바로 이으면 중간이 회색으로 흐려져요. 파랑에서 주황으로 가는 그라디언트가 대표적이에요.
해결책은 중간 색을 하나 넣는 거예요. 두 색 사이를 도는 경로에 있는 색을 골라 넣으면 훨씬 맑게 이어져요.
색 스톱의 위치를 옮기는 것도 방법이에요. 한쪽 색을 더 오래 유지하다가 짧은 구간에서 넘어가게 하면 탁한 구간이 눈에 덜 띄어요.
그림자를 여러 겹 쌓는 이유
실제 그림자는 한 겹이 아니에요. 물체 가까이는 진하고 좁게, 멀어질수록 연하고 넓게 퍼져요. 한 겹으로 흉내 내면 인위적으로 보여요.
가까운 곳에 좁고 진한 겹, 먼 곳에 넓고 연한 겹을 쌓으면 훨씬 자연스러워요. 위에 있는 겹이 앞쪽에 그려져요.
안쪽 그림자는 눌린 느낌을 줘요. 입력칸이나 눌린 상태의 버튼에 쓰면 들어가 있는 것처럼 보여요.
CSS 그라디언트 생성기 사용 방법
- 그라디언트와 그림자 중 만들 것을 골라요.
- 프리셋에서 시작하거나 색을 직접 정해요.
- 각도·색 위치나 그림자 겹을 조절해 미리보기를 다듬어요.
- 코드를 눌러 복사해 CSS에 붙여 넣어요.
자주 묻는 질문
- 어떤 형태의 그라디언트가 되나요?
- 선형·원형·원뿔형을 만들 수 있고 색은 원하는 만큼 더할 수 있어요.
- 가운데가 탁해 보여요.
- 보색에 가까운 두 색을 섞으면 중간이 회색으로 흐려져요. 중간 색을 하나 더 넣으면 맑아져요.
- 그림자도 만들 수 있나요?
- 네, 여러 겹을 쌓을 수 있고 안쪽 그림자도 만들 수 있어요. 코드를 그대로 복사하면 돼요.
- 프리셋은 어떤 게 있나요?
- 노을·바다·야경·민트·복숭아·무지개 같은 그라디언트와, 은은한 카드·떠 있는 버튼·눌린 입력칸·네온 같은 그림자가 준비돼 있어요.
- 복사한 코드를 어디에 넣나요?
- CSS 속성 한 줄로 되어 있어서 background나 box-shadow 자리에 그대로 붙여 넣으면 돼요.
- 이미지로 저장할 수 있나요?
- CSS 코드를 만드는 도구예요. 이미지가 필요하다면 만든 배경을 화면에서 캡처해 쓰면 돼요.
알아 두면 좋은 점
- 아주 오래된 브라우저에서는 원뿔형 그라디언트가 지원되지 않을 수 있어요.
- 그림자 겹을 너무 많이 쌓으면 화면이 무거워져요.