🎨 시각 효과 & 그라데이션

1. 글래스모피즘 카드

유리 같은 반투명 카드: Apple Big Sur 이후 표준 UI. 글래스모피즘 도구에서 블러·투명도·채도 조정해 코드 받기. `backdrop-filter:blur()` + `-webkit-` 접두사 자동 포함.

2. 메시 그라데이션

Stripe·Vercel·Linear 랜딩 페이지의 핵심 비주얼. 메시 그라데이션 도구로 4색 부드러운 보간. CSS만으로 작동, 이미지 불필요.

3. 그라데이션 블러 (Apple 스타일)

2023~24년 핫한 트렌드. 어두운 배경 + 컬러 구체 + 블러 = 미래적 느낌. 그라데이션 블러 도구로 5가지 프리셋.

4. 콘식 그라데이션

원형으로 도는 무지개·홀로그램·다이얼. 콘식 도구로 conic-gradient() 생성. Chrome 69+, Safari 12.1+ 지원.

🔘 UI 컴포넌트

5. 버튼 생성기

단색·그라데이션·외곽선·고스트·뉴모피즘. 버튼 도구에서 호버 효과까지 한 번에. 5가지 호버 (lift·scale·brightness·invert·none).

6. 토글 스위치

iOS·Material Design 토글. 토글 도구에서 checkbox 기반 접근성 OK. 다크 모드 스위치에 필수.

7. 커스텀 체크박스

OS 기본 체크박스는 못생겼죠. 체크박스 도구로 5가지 스타일 + 4가지 마크. focus outline까지 자동.

8. 로딩 스피너

이미지 없는 순수 CSS 스피너. 스피너 도구에서 8종 (ring·dots·bars·pulse 등). 속도·색·두께 자유.

📝 텍스트 효과

9. 그라데이션 텍스트

인스타·홀로그램 트렌드. 그라데이션 텍스트 도구는 background-clip:text 활용. 헤드라인에 즉시 사용 가능.

10. 글리치 텍스트 애니메이션

사이버펑크·게임 UI용 RGB shift 애니. 글리치 도구에서 clip-path + 키프레임 자동 생성.

🎯 보너스: 2024+ 신기술

CSS Color Module Level 4의 color-mix() 함수가 디자인 시스템에 혁명을 일으키고 있어요. color-mix 도구로 srgb·oklch·lab 색공간 보간을 비교해보세요. oklch는 사람 눈에 가장 자연스러운 보간을 만듭니다.

💡 브라우저 지원: color-mix는 Chrome 111+, Firefox 113+, Safari 16.2+ (2023+). conic-gradient는 더 오래됨. backdrop-filter는 -webkit- 접두사 필요.

⚠️ 주의사항

• backdrop-filter blur 큰 값(>40px)는 모바일 성능 저하. 의도적으로만 사용
• conic-gradient·color-mix는 IE 미지원. 폴백 색 준비
• 접근성: 시각 효과만 있고 의미가 없는지 항상 점검
• 다크 모드: CSS 변수로 색 토큰화하면 유지보수 쉬워짐