뉴모피즘 생성기

뉴모피즘 생성기 소개

뉴모피즘 생성기는 배경 표면에서 튀어나오거나 파묻힌 듯한 부드럽고 입체적인 “소프트 UI” 룩을 디자인합니다. 기본 색상 하나만 고르면 나머지는 도구가 알아서 계산해 줍니다. 이 효과는 요소와 배경이 같은 색을 공유하고, 입체감이 전적으로 서로 반대 방향인 두 개의 box-shadow에서 나올 때만 성립하기 때문입니다.

슬라이더로 크기, 모서리 반경, 그림자 거리, 강도, 흐림 정도 같은 형태를 조절합니다. flat, concave, convex, pressed 네 가지 모양 모드는 내부 그라디언트와 그림자 방향을 바꾸며, 광원 선택기는 하이라이트를 네 모서리 중 어디로든 옮겨 디자인의 조명 방향에 맞출 수 있습니다.

기본적으로 밝은 그림자와 어두운 그림자 색은 기본 색상에서 자동 계산되지만, 수동 모드를 켜면 직접 지정할 수 있습니다. background, radius, 이중 box-shadow가 포함된 생성 CSS는 클릭 한 번이면 얻을 수 있습니다.

뉴모피즘 생성기 사용 방법

1. 기본 색상을 선택합니다. 요소와 그 배경 캔버스 양쪽에 함께 적용됩니다.
2. flat, concave, convex, pressed 중 모양을 고릅니다.
3. 하이라이트가 떨어지는 위치를 정하도록 광원 모서리를 설정합니다.
4. 슬라이더로 크기, 모서리 반경, 거리, 강도, 흐림 정도를 조정합니다.
5. 계산된 밝은/어두운 색조를 직접 지정하고 싶다면 수동 그림자 색상을 켭니다.
6. CSS를 복사해 요소에 붙여 넣습니다.

자주 묻는 질문