클레이모피즘 생성기 둥근 모서리, 내부 그림자, 부드러운 하이라이트와 함께 클레이 같은 3D UI 효과를 만듭니다.
클레이모피즘 생성기
둥근 모서리, 내부 그림자, 부드러운 하이라이트와 함께 클레이 같은 3D UI 효과를 만듭니다.
3D
, ,
CSS
- CSS
What Is 클레이모피즘 생성기?
클레이모피즘 생성기는 요소를 부드럽고 둥근 물체처럼 보이게 하는 클레이와 같은 3D UI 효과를 만듭니다. 클레이모피즘은 파스텔 색상, 높은 테두리 반경, 계층화된 그림자로 깊이를 만들어내며, 내부 하이라이트가 3차원적인 玩具 같은 외관을 제공하는 디자인 트렌드입니다. 이 도구는 배경색 및 테두리 색상, 테두리 반경, 깊이(그림자 강度에 영향을 줌), 테두리 너비 및 내부 라이트 하이라이트 토글과 같은 제어를 제공합니다. 외부 그림자, 미묘한 내부 어두운 그림자, 내부 라이트 하이라イト의 조합은 특징적인 클레이와 같은 외관을 만듭니다. 이 효과는 밝은 배경에 파스텔 또는 무딘 색상을 사용할 때 가장 잘 작동합니다. 미리보기에서는 중립적인 배경에서 요소를 보여주어 3D 클레이 효과를示しています.
Why Use 클레이모피즘 생성기?
-
-
3D
-
-
Common Use Cases
3D
Mobile App UI
Technical Guide
클레이모피즘은 계층화된 박스 그림자 값을 통해 3D 클레이와 같은 외관을 달성합니다. 외부 그림자(예: 10px 10px 20px rgba(0,0,0,0.15))는 요소 아래쪽과 오른쪽에 부드러운 그림자를 만들어 깊이를 생성합니다. 인셋 그림자(예: inset -5px -5px 5px rgba(0,0,0,0.05))는 내부 하단 우측에 미묘한 어둡음을 추가합니다. 추가적인 인셋 그림자(예: inset 5px 5px 5px rgba(255,255,255,0.6))는 상단 좌측 내부에서 라이트 하이라이트를 생성하여 광원처럼 보이게 합니다. 높은 테두리 반경(20-40px)은 둥근 부드러운 외관을 제공합니다. 파스텔 배경 색상과 일치하는 테두리가 클레이 미학을 완성합니다. 테두리는 정의를 추가하지만 거친 것은 아닙니다. 최상의 효과를 위해 채도가 낮고 밝기가 높은 색상을 사용하십시오. 깊이 매개변수는 일관된 3D 외관을 위한 모든 그림자 값을 비례적으로 조정합니다.
Tips & Best Practices
-
1
-
2(20-40px)
-
33D
-
4
Related Tools
Frequently Asked Questions
Q
Q ?
Q ?
Q ?
Q ?
About This Tool
클레이모피즘 생성기 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.