CSS Cubic-Bezier 곡선 생성기
색상
`cubic-bezier(x1, y1, x2, y2)` CSS 타이밍 함수의 인터랙티브 편집기. 곡선의 두 핸들을 드래그하거나 좌표를 직접 입력. Y 값은 [0, 1] 밖으로 나가 오버슈트나 앤티시페이션 효과 가능. 선택한 시간 동안 곡선으로 왔다 갔다 하는 프리뷰 블록으로 실제 모션 체감. 기본 CSS 키워드(ease·ease-in/out) + 유용한 커스텀 곡선 프리셋.
—
프리셋
프리뷰 애니메이션
CSS
transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);transition-timing-function 또는 animation-timing-function와 함께 사용.
사용법
- 파란색·빨간색 핸들을 드래그해 곡선 모양 조정.
- 또는 프리셋(ease·ease-in-out·overshoot…) 선택.
- 재생을 눌러 선택한 시간으로 모션 체감 후 CSS 복사.
자주 묻는 질문
- 왜 Y가 1보다 크거나 0보다 작아도 되나요?
- 오버슈트(튕김)·앤티시페이션(예비 동작) 효과는 Y가 [0, 1] 밖에 있어야 가능. CSS는 허용 — 애니메이션 값이 잠시 목표를 넘었다가 정착.
- X 값은요?
- CSS는 X1·X2를 [0, 1]로 제한해 곡선이 시간의 함수가 되도록. 슬라이더가 X는 클램프하고, Y는 1 초과 / 0 미만 허용해 오버슈트 가능.
- 스프링 물리와 차이?
- Cubic-bezier는 고정 시간 위의 결정적 곡선. 스프링(`linear(...)` 또는 JS)은 실제 물리 모델 — 모델은 다르지만 단순 케이스에선 비슷한 느낌.
- CSS에서 어디에 써요?
- `transition-timing-function: cubic-bezier(...)` 또는 `animation-timing-function:`. Tailwind: `ease-[cubic-bezier(...)]`.
관련 도구
색맹 시뮬레이터
8가지 색각 이상(CVD)에 따라 이미지가 어떻게 보이는지 시뮬레이션.
색상00
CSS Box Shadow 생성기
여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.
색상00
컬러 포맷 변환기
어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.
색상00
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
색상00
컬러 팔레트 생성기
기준 색에서 여섯 가지 배색으로 조화로운 팔레트를 만드세요.
색상00
색상 대비 검사기
글자/배경 대비를 WCAG AA·AAA 기준으로 검사하세요.
색상00