CSS 생성기
그라디언트·그림자·모서리를 눈으로 조절
브라우저 내 처리
옵션
결과
결과
background: linear-gradient(135deg, #1fa89c 0%, #7c3aed 100%);
복사한 코드를 CSS 선택자 안에 그대로 붙여 넣으면 됩니다.
CSS의 그림자나 그라디언트는 숫자를 조금씩 바꿔 가며 감을 잡아야 합니다. 슬라이더로 조절하면 바로 결과가 보이고, 마음에 드는 값을 찾으면 코드를 복사해 그대로 붙여 넣으면 됩니다.
사용 방법
- 1 만들 종류를 고릅니다. 그라디언트, 그림자, 모서리, 글자 그림자 중에서 선택합니다.
- 2 슬라이더와 색상 선택기로 값을 조절합니다.
- 3 아래 미리보기에서 결과를 확인합니다.
- 4 CSS 코드를 복사해 스타일시트에 붙여 넣습니다.
자주 묻는 질문
spread(번짐)는 무엇인가요?
그림자의 크기를 키우거나 줄입니다. 음수로 주면 그림자가 요소보다 작아져 더 자연스러운 느낌이 납니다. 카드 UI에서 자주 쓰는 기법입니다.
inset은 언제 쓰나요?
그림자를 요소 바깥이 아니라 안쪽에 그립니다. 눌린 버튼이나 입력창의 오목한 느낌을 표현할 때 사용합니다.
그라디언트 각도는 어떻게 정해지나요?
0도가 아래에서 위, 90도가 왼쪽에서 오른쪽 방향입니다. 시계 방향으로 증가하며 135도가 대각선으로 가장 무난합니다.