CSS 뉴모피즘 생성기
표면과 빛의 방향을 조정하고 미리 본 뒤 안전한 일반 텍스트 CSS를 복사하세요.
LIVE PREVIEW
Neumorphism
사용 방법
사용 방법
- 배경색을 고르고 모서리, 거리, 흐림과 강도를 조정합니다.
- 빛의 각도를 정하고 브라우저에서 미리 봅니다.
- 생성된 box-shadow 선언을 스타일시트에 복사합니다.
한 쌍의 부드러운 그림자
같은 표면에 밝은 그림자와 어두운 그림자를 사용하고 기본 색과 빛의 각도에서 계산합니다.
안전한 일반 텍스트 출력
결과는 CSS 선언뿐입니다. 미리보기는 style 속성을 사용하며 입력 HTML을 해석하거나 실행하지 않습니다.
시각적 시작점
효과는 주변 배경과 대비에 따라 달라집니다. 실제 UI에서 확인하고 중요한 상태에는 다른 단서도 제공하세요.
자주 묻는 질문
더 알아보기
HTML도 생성하나요?
아니요. box-shadow CSS 선언만 생성합니다.
입력이 업로드되나요?
아니요. 계산과 미리보기는 브라우저에서 로컬로 처리합니다.
그림자가 두 개인 이유는?
밝은 그림자와 어두운 그림자를 함께 사용해 입체감을 만들기 때문입니다.