🌊 CSS 리플 효과 생성기 | 순수 CSS·JS 코드

구현 방식

물결 색

물결 불투명도

퍼짐 크기 (CSS 방식은 요소 너비, JS 방식은 긴 변 기준)

지속 시간 (직접 정하세요)

전환 곡선

버튼을 누를 때 물결이 퍼지는 효과의 코드를 만들어 줍니다. 색과 불투명도, 퍼짐 크기, 지속 시간을 넣으면 순수 CSS 방식과 자바스크립트를 함께 쓰는 방식 중 하나를 골라 받을 수 있고, 바로 위 미리보기 버튼을 눌러 확인할 수 있습니다.

순수 CSS 방식은 ::after에 원을 만들어 두고 :active일 때 scale을 0에서 1로 키웁니다. 포인터 좌표를 CSS가 알 수 없어서 퍼지는 중심은 항상 요소의 가운데입니다. JS 방식은 클릭한 지점을 기준으로 원을 하나 만들어 붙이고 애니메이션이 끝나면 지웁니다. 두 방식 모두 요소에 position: relative와 overflow: hidden이 필요합니다. 속성 정의는 W3C CSS Transitions·Animations 명세를 따릅니다(2026년 10월 기준).

지속 시간과 곡선은 권장값을 제시하지 않고 입력한 값을 그대로 씁니다. 손가락을 떼면 순수 CSS 방식의 물결은 즉시 사라지며, 누른 상태를 유지하는 잔상 효과는 지원하지 않습니다. 움직임을 줄여 달라는 설정을 따르려면 prefers-reduced-motion 블록을 따로 추가하세요.

자주 묻는 질문

순수 CSS로 클릭한 자리에서 퍼지게 할 수 있나요?

할 수 없습니다. CSS는 포인터 좌표를 알지 못하므로 가운데에서 퍼지는 모양만 가능합니다. 클릭 지점이 필요하면 JS 방식을 고르세요.

overflow: hidden은 왜 필요한가요?

물결 원이 요소보다 크게 자라기 때문입니다. overflow: hidden이 없으면 원이 버튼 밖으로 삐져나와 주변 레이아웃을 덮습니다.

지속 시간은 몇 ms가 맞나요?

이 도구는 권장 시간을 제시하지 않습니다. 입력한 값을 그대로 코드에 넣으며, 적절한 길이는 버튼 크기와 제품 성격에 따라 달라집니다.

🌊CSS 버튼 물결(리플) 효과 생성기

관련된 도구

CSS 토글·스위치 코드 생성기

CSS 호버 인터랙션 효과 코드 생성기

자주 묻는 질문

관련된 도구

CSS 토글·스위치 코드 생성기

CSS 호버 인터랙션 효과 코드 생성기

자주 묻는 질문

같은 카테고리 도구