📈 cubic-bezier 생성기 | 곡선 보고 값 복사

첫 번째 제어점 x1 (0 ~ 1)

첫 번째 제어점 y1 (범위 제한 없음 — 0 밖이면 되돌아가는 움직임)

두 번째 제어점 x2 (0 ~ 1)

두 번째 제어점 y2 (범위 제한 없음 — 0 밖이면 되돌아가는 움직임)

cubic-bezier 네 숫자가 뜻하는 것

이징 곡선은 가로축이 경과 시간, 세로축이 진행률인 그래프입니다. cubic-bezier 의 네 숫자는 두 제어점의 좌표이고 시작점 (0,0) 과 끝점 (1,1) 은 고정입니다. 여기서는 네 값을 넣으면 곡선을 그려 주고, 시간 25%·50%·75% 지점의 진행률을 표로 보여 줍니다.

x 는 0~1, y 는 제한이 없습니다

x 가 0~1 범위를 벗어나면 CSS 가 그 선언을 무효로 보고 버리기 때문에 입력에서 막습니다. y 는 제한이 없어서 1 을 넘기거나 0 아래로 내려가는 값을 쓸 수 있고, 그 경우 목표를 지나쳤다가 되돌아오는 움직임이 됩니다. 함수 정의는 W3C 의 CSS Easing Functions 명세를 따릅니다(2026년 10월 기준).

하지 않는 것

적당한 곡선을 권하지 않습니다. 값이 ease 같은 키워드와 소수 3자리까지 같으면 그 이름을 알려 주기만 합니다. 지속시간·반복 같은 재생 설정은 transition·keyframes 쪽 도구가 맡고, 여기서는 timing-function 선언만 만듭니다. steps() 계단 함수도 다루지 않습니다.

자주 묻는 질문

x 값에만 범위 제한이 있는 이유가 뭔가요?

가로축이 시간이라 뒤로 흐를 수 없기 때문입니다. x 가 0~1 밖이면 CSS 가 선언을 무효로 보고 버립니다. 세로축인 y 는 제한이 없습니다.

y 를 1 보다 크게 하면 어떻게 되나요?

진행률이 목표를 지나쳤다가 되돌아옵니다. 튕기는 느낌을 낼 때 쓰며, 지나치는 폭은 결과의 진행률 범위에서 백분율로 확인할 수 있습니다.

키워드 ease 와 같은 값이 있나요?

ease 는 0.25, 0.1, 0.25, 1 입니다. 입력값이 키워드와 소수 3자리까지 같으면 결과에 그 이름을 함께 보여 줍니다.

📈CSS cubic-bezier 이징 곡선 생성기

관련된 도구

CSS transition 코드 생성기

CSS 키프레임 애니메이션 코드 생성기

cubic-bezier 네 숫자가 뜻하는 것

x 는 0~1, y 는 제한이 없습니다

하지 않는 것

자주 묻는 질문

관련된 도구

CSS transition 코드 생성기

CSS 키프레임 애니메이션 코드 생성기

cubic-bezier 네 숫자가 뜻하는 것

x 는 0~1, y 는 제한이 없습니다

하지 않는 것

자주 묻는 질문

같은 카테고리 도구