Cubic Bezier 생성기
미리 보기
cubic-bezier(0.25, 0.1, 0.25, 1)transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);관련 외부 도구
일부 링크는 제휴 링크입니다.
관련 도구
색상 변환HEX·RGB·HSL·HSV·RGBA를 한 화면에서 상호 변환. 값 하나만 바꿔도 전부 연동, 원클릭 복사, 투명도·WCAG 대비 지원.배색 생성기기준 HEX에서 보색·유사색·트라이어드 등 조화로운 컬러 팔레트를 자동 생성. 색상을 잠그고 나머지를 재생성하며 CSS 변수·Tailwind·JSON으로 내보내기.그라데이션 생성기여러 색상 정지점으로 선형·방사형·원뿔형 CSS 그라데이션을 만드세요. 각도·형태·중심을 조정하고 background CSS 또는 Tailwind 값을 원클릭으로 복사.이미지 색상 추출기이미지를 업로드하지 않고 브라우저에서 주요 색상 팔레트를 추출합니다. 각 색상의 HEX, RGB와 비율(%)을 확인하고 CSS/JSON으로 내보내세요.
두 개의 핸들을 드래그해 맞춤 CSS 이징 커브를 설계하고, 실시간 미리 보기로 움직임을 확인한 후, 바로 쓸 수 있는 cubic-bezier() 값과 transition 코드를 복사하세요. 애니메이션의 느낌을 세밀하게 조정하는 데 최적입니다. 모든 것이 브라우저에서 실행됩니다.
사용 방법
- 두 개의 색상 핸들을 드래그하거나 x1, y1, x2, y2 값을 직접 입력합니다.
- 다시 재생을 눌러 커브가 만드는 움직임을 미리 봅니다.
- cubic-bezier() 값 또는 transition 코드 전체를 CSS에 복사합니다.
작동 원리
CSS 이징 커브는 (0,0)과 (1,1)을 고정 끝점으로 하는 3차 베지어 곡선입니다. 두 제어점이 그 사이의 커브 형태를 결정하며, 그 좌표가 cubic-bezier(x1, y1, x2, y2)의 네 숫자입니다. x 값은 0과 1 사이여야 하지만(시간은 항상 앞으로), y 값은 0 미만이거나 1 초과일 수 있어 예비 동작이나 오버슈트 효과를 만들 수 있습니다.
주요 기능
드래그로 형태 조정
커브 위에서 직접 핸들을 움직여 원하는 이징을 찾습니다.
정밀 값 입력
스펙이나 디자인 시스템에 맞춰야 할 때 정확한 좌표를 직접 입력합니다.
실시간 미리 보기
움직임을 다시 재생해 실제 사용 전에 이징을 판단합니다.
표준 프리셋
ease, linear, ease-in, ease-out, ease-in-out 프리셋에서 시작해 조정합니다.
바로 복사 가능한 코드
cubic-bezier() 값 또는 완전한 transition 선언문을 복사합니다.
활용 상황
UI 모션
버튼, 모달, 패널의 움직임을 조정해 전환이 자연스럽게 느껴지도록 합니다.
마이크로인터랙션
작은 인터랙션에 미묘한 오버슈트나 예비 동작을 추가해 개성을 부여합니다.
일관된 이징
맞춤 커브 하나를 정의하고 프로젝트 전반에 재사용해 통일된 느낌을 줍니다.
학습
제어점이 움직임을 어떻게 바꾸는지 보면서 이징 함수를 이해합니다.
참고 사항
- x 값은 0–1로 제한됩니다. 시간은 뒤로 갈 수 없기 때문입니다.
- y 값은 0–1을 초과할 수 있어 바운스나 오버슈트 효과를 만들 수 있습니다.
- 내장 프리셋은 표준 CSS 키워드를 근사합니다.
- 모든 것이 기기에서 실행됩니다. 업로드되지 않습니다.
자주 묻는 질문
- cubic-bezier 이징이란 무엇인가요?
- 두 개의 제어점으로 정의되는 CSS transition과 animation의 타이밍 함수로, cubic-bezier(x1, y1, x2, y2)로 표현하며 속성이 시간에 따라 어떻게 변하는지 결정합니다.
- y 값이 1을 초과하거나 0 미만일 수 있나요?
- 네. 0–1 범위를 벗어난 y 값은 애니메이션이 오버슈트하거나 되돌아가는 바운스 효과를 만듭니다. x 값만 0–1로 제한됩니다.
- ease, ease-in-out과 어떤 관계인가요?
- 이 키워드들은 특정 cubic-bezier 커브입니다. 해당 프리셋에서 시작한 후 핸들을 드래그해 커스터마이즈하세요.
- 결과를 어디에 붙여넣나요?
- transition이나 animation의 타이밍 함수로 cubic-bezier() 값을 사용합니다. 예: transition: all 0.4s cubic-bezier(...).
- 서버로 전송되는 내용이 있나요?
- 아니요. 편집기는 브라우저에서 완전히 실행되며 업로드되지 않습니다.