CSS 그림자·효과 생성기

Box Shadow, 글래스모피즘, 뉴모피즘 효과를 코드로 만듭니다.

🌓 Box Shadow

X Offset 10px

Y Offset 10px

Blur Radius 20px

Spread Radius 0px

Box Color

Shadow Color

Opacity 0.3

box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.3);

✍️ Text Shadow

Antigravity

X Offset 2px

Y Offset 2px

Blur Radius 4px

Text Color

Shadow Color

Opacity 0.5

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

💧 Border Radius (Liquid)

Top Left 30%

Top Right 70%

Bottom Right 70%

Bottom Left 30%

Shape Factor 30%

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

💎 Glassmorphism

Blur 10px

Opacity 0.2

Border Opacity 0.3

background: rgba(255, 255, 255, 0.2);
backdrop-filter:
                  blur(10px);
border: 1px solid rgba(255, 255, 255,
                  0.3);

🔘 Neumorphism

Distance 20px

Intensity 0.15

Blur 60px

Shape

background: #e0e0e0;
box-shadow: 20px 20px 60px
                  #bebebe,
-20px -20px 60px #ffffff;

🌈 CSS Filter Effects

Blur 0px

Brightness 100%

Contrast 100%

Grayscale 0%

Saturate 100%

Hue-Rotate 0deg

Sepia 0%

Invert 0%

filter: none;

CSS 비주얼 효과 가이드: 스타일의 깊이를 더하는 기술

CSS 비주얼 효과 생성기는 웹 디자인의 디테일을 결정짓는 요소들을 시각적으로 자유롭게 설계할 수 있는 종합 도구입니다. 복잡한 수치 계산 없이 슬라이더 조절만으로 모던하고 세련된 UI 스타일을 완성해 보세요.

1. Box Shadow (박스 그림자)

그림자는 평면적인 웹 디자인에 깊이감(Depth)과 입체감을 불어넣어 줍니다. 단순히 검은색 그림자를 사용하는 대신, 요소의 색상에 기반한 미묘한 그림자를 사용하면 훨씬 더 고급스러운 느낌을 줄 수 있습니다. 최근에는 Neumorphism(뉴모피즘) 스타일처럼 부드럽고 넓게 퍼지는 그림자가 트렌드입니다.

2. Border Radius (테두리 둥글기)

테두리의 둥글기는 웹 사이트의 전체적인 분위기를 결정합니다. 0px의 날카로운 모서리는 신뢰감 있고 전문적인 느낌을 주는 반면, 부드럽게 깎인 모서리는 친근하고 현대적인 느낌을 줍니다. 본 도구를 활용하면 8개의 개별 수치를 조절하여 독특한 유기적 형태(Liquid Shape)도 만들 수 있습니다.

3. Glassmorphism & CSS Filters

Glassmorphism (유리 효과): 반투명한 배경에 backdrop-filter: blur()를 적용하여 마치 무광 유리를 얹은 듯한 세련된 효과를 만듭니다. 카드 뉴스나 모달 창 디자인에 적극 추천합니다.
Filters: 이미지나 요소에 흑백, 세피아, 반전 효과를 즉시 적용할 수 있습니다. 특히 hue-rotate는 한 번에 사이트의 테마 컬러를 변경해 보는 실험을 할 때 매우 유용합니다.

4. 실무 활용 팁

비주얼 효과는 사용자의 시선을 유도하는 '시각적 계층 구조(Visual Hierarchy)'를 만드는 데 사용하세요. 가장 중요한 버튼에는 강한 그림자를, 덜 중요한 카드에는 옅은 그림자를 적용하면 사용자가 무엇을 먼저 클릭해야 할지 직관적으로 알 수 있습니다. 이 도구에서 생성된 깔끔한 CSS 코드를 복사하여 프로젝트에 즉시 적용해 보세요.