CSS 생성기: 그라데이션, 그림자, 애니메이션

이 도구의 기능

• OKLCH와 OKLab으로 보간하는 그라데이션: sRGB의 일반적인 혼합처럼 중간이 탁해지지 않습니다.
• “전환 부드럽게” 모드는 중간 색을 추가하여 넓은 그라데이션에 보이던 줄무늬를 없앱니다.
• 똑똑한 다층 그림자: 간격을 점점 키운 여러 겹은 그림자 하나보다 부드럽고 자연스러워 보입니다.
• 뉴모피즘: 오목, 볼록, 눌린 형태이며 빛과 그림자 색은 배경색에서 계산됩니다.
• 블롭: 여덟 가지 border-radius 값, 무작위 모양, 두 모양 사이를 오가는 모핑 애니메이션.
• 드래그로 조절하는 이징 곡선과 함께 스프링과 튀는 공을 linear() 함수로 만듭니다. 일반 편집기에는 없는 기능입니다.

완성된 코드는 버튼 하나로 복사됩니다. 브라우저가 일부 방식(예: 오래된 버전에서의 OKLCH 혼합)을 지원하지 않으면 미리보기에서 알려 주지만, 코드 자체는 최신 브라우저에서 올바르게 동작합니다.

애니메이션과 곡선은 실시간 미리보기에서 확인하세요. “실행” 버튼을 누르면 움직임이 다시 재생됩니다.