CSS 그라디언트·그림자 생성기
그라디언트·박스 그림자를 눈으로 조절하고 CSS 코드를 복사
0 ~ 360° (원뿔은 시작 각도)
색 · 위치(%) · 투명도(%) 순서입니다. 최소 2개가 필요합니다.
먼저 적힌 겹이 위에 그려집니다. 최소 1겹이 필요합니다.
그라디언트 CSS
그림자 CSS
입력값은 브라우저에서만 처리되며 서버로 전송·저장되지 않습니다.
CSS 그라디언트·그림자 생성기란?
CSS 그라디언트·그림자 생성기는 linear·radial·conic 그라디언트와 여러 겹 box-shadow를 눈으로 보며 조절하고, 완성된 CSS 값을 한 번에 복사할 수 있는 도구입니다. 색 정지점·투명도·각도를 바꾸면 미리보기와 코드가 동시에 갱신됩니다.
사용법
- 그라디언트: 프리셋을 고르거나 유형·각도·색 정지점을 직접 조절한 뒤
background값을 복사합니다. - 그림자: 겹을 추가하고 X·Y·번짐·확산·색·투명도·inset을 조절해
box-shadow값을 복사합니다.
개인정보·처리 방식
모든 미리보기와 코드 생성은 사용자의 브라우저 안에서만 이루어집니다. 입력한 값은 서버로 전송되거나 저장되지 않습니다.
자주 묻는 질문
linear·radial·conic 그라디언트는 어떻게 다른가요?
linear는 정해진 각도를 따라 직선으로 색이 변하고, radial은 중심에서 바깥으로 원형으로 퍼지며, conic은 중심을 기준으로 시계 방향으로 한 바퀴 돌며 색이 바뀝니다.
색 정지점의 위치(%)는 무엇을 뜻하나요?
그라디언트 진행 방향 전체 길이를 0~100%로 보았을 때 해당 색이 100% 도달하는 지점입니다. 두 정지점의 위치를 가깝게 두면 색 경계가 뚜렷해지고, 멀리 두면 부드럽게 섞입니다.
box-shadow를 여러 겹 쓰면 어떤 점이 좋은가요?
가까운 얕은 그림자와 멀리 퍼지는 큰 그림자를 겹치면 한 겹보다 자연스러운 입체감을 낼 수 있습니다. 쉼표로 이어 쓰며 앞쪽에 적은 그림자가 위에 그려집니다.
투명도를 넣으면 코드가 어떻게 바뀌나요?
투명도가 100%이면 #RRGGBB 형식으로, 그보다 낮으면 rgba(r, g, b, 알파) 형식으로 출력됩니다. 두 형식 모두 모든 최신 브라우저에서 동작합니다.
입력한 값이 서버로 전송되나요?
아니요. 미리보기와 코드 생성은 모두 브라우저 안에서만 이루어지며 입력값은 서버로 전송되거나 저장되지 않습니다.
광고