三次ベジェ曲線ジェネレーター
新着制御点をドラッグしてCSSのイージング曲線を設計。ライブプレビュー付き。
Runs entirely in your browser. Nothing is uploaded.
CSSイージング曲線をビジュアルにデザインする
この cubic-bezierジェネレーターは、抽象的な cubic-bezier(x1, y1, x2, y2) の値を、見て感じられるものに変えます。グラフ上の2つの制御点ハンドルをドラッグして加速曲線を形作り、その正確なタイミングで動くライブプレビューを確認し、CSSトランジションとアニメーションにすぐ使える値をコピーしましょう。完全な イージング曲線エディターと cubic-bezierビジュアライザーを一つに統合し、ブラウザだけで完結します — インストール不要、アカウント不要。
すべての曲線は (0,0) から (1,1) まで伸びています。横軸は時間、縦軸は進行度です。最初に急上昇する曲線は素早いスタートを意味し、終わりに近づくにつれ平坦になる曲線は滑らかな終わりを意味します。4つの入力に正確な数値を入力するか、ハンドルをドラッグするか、既存の cubic-bezier() 値を貼り付けて読み込んで調整できます。ハンドルを動かすたびに結果がリアルタイムで更新されます。
30以上のプリセット：CSSキーワードと名前付きイージング曲線
プリセットバーは、競合他社が通常分離している2つのものを一つにまとめています。CSSの5つのキーワード — linear、ease、ease-in、ease-out、ease-in-out — に加えて、easings.netで広まった名前付きイージング曲線の完全なカタログ：Sine、Quad、Cubic、Quart、Quint、Expo、Circ、Backが、それぞれIn、Out、In-Outバリアントで揃っています。つまり easeInOutCubic、easeOutQuart、easeOutBack などがワンクリックで使え、すでに css cubic-bezier の値に変換されています。
各プリセットには小さな曲線サムネイルが表示され、その形状を一目で識別できます。そのままエディターに読み込み、細かく調整できます。Easings.netは名前と静止画像を表示するだけで、編集やエクスポートはできません。cubic-bezier.comはCSSの5つのキーワードは表示しますが、Pennerのフルセットはありません。このツールは両方を、編集機能付きで、1か所に提供します。
オーバーシュート、バウンス、アンティシペーション
cubic-bezierのy値は0–1に限定されていません。ハンドルをボックスの上に押し上げると、アニメーションが目標を行き過ぎてから落ち着きます — easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1) のスプリングっぽい感覚です。ハンドルをボックスの下に引くと、要素がまず引き絞られ、ジャンプ前の助走のような動きになります。エディターのグラフはユニットボックスを超えて広がっているので、そのオーバーシュート領域にドラッグして結果をすぐに確認できます。
Chrome DevToolsにはcubic-bezierエディターが内蔵されていますが、ハンドルを0–1ボックスに固定しているため、オーバーシュートやアンティシペーション効果を作ることができません。Firefox DevToolsも同じ制限があります。また、どちらも名前付きプリセットカタログやここで利用できるエクスポートオプションがありません。オーバーシュートが必要なら、このツールはそれを真にサポートする数少ない選択肢の一つです。
他のcubic-bezierツールとの比較
Lea VerouのcUbic-bezier.comは、ドラッグ＆プレビュー形式を広めた参照ツールで、今もCSSの曲線を素早く生成するのに優れています。しかしGSAPエクスポート、JavaScriptイージング関数の出力、比較モード、Pennerプリセットライブラリがなく、モバイルではインターフェイスが崩れます。Easings.netは読み取り専用の参照 — 名前付きの曲線を選ぶと値が表示されますが、エディターも調整機能もありません。
ChromeとFirefox DevToolsはブラウザインスペクター内に軽量なcubic-bezierエディターを持ち、DevToolsを開いているときは便利です。デメリット：DevToolsなしで使えない、ハンドルが0–1に固定（オーバーシュート不可）、GSAPやJSコードをエクスポートできない、モバイルではまったく動作しません。UtiloKitのジェネレーターはインタラクティブエディター、プリセットライブラリ、比較ツール、3つのエクスポート形式をどんなデバイスでも動く1ページに集約しています。
ライブプレビューと並べて比較
再生ボタンを押すとデモ要素があなたの曲線でループし、数値だけでなく動きを判断できます。デモを translate、scale、opacity に切り替え、実際のアニメーションに合わせて時間を調整してください。比較をオンにすると2つ目の曲線を最初の曲線の横に並べられます — 本番環境に適用する前に正しいトランジションタイミング関数を選ぶのに最適です。
duration スライダーはプレビュー速度を200msから3秒まで制御するので、同じ曲線が異なる速度でどう感じるかをテストできます。スローモーションプレビューは、300msでは見えない問題 — 最初のカクつきなど — を明らかにすることがよくあります。cubic-bezier.comを含む他のほとんどのツールは固定速度でプレビューするだけで、並べて比較する機能はありません。
CSS、GSAP、JavaScriptにエクスポート — 無料
使用しているスタックに必要なものをコピーしてください。CSSタブは transition 一行の省略記法と完全な @keyframes アニメーションブロックの両方を提供します。GSAPタブはGSAPアニメーションが曲線に正確に合うよう CustomEase.create() の呼び出しを出力します。JSタブはスタンドアロンの javascript cubic-bezier イージング関数を生成します — 依存関係なしで requestAnimationFrame やどんなトゥイーンにも組み込めるNewton-Raphsonソルバーです。
気に入った曲線を見つけましたか？共有しましょう。ツールは4つの値をページURLにエンコードするので、リンク一つでどんなデバイスでも正確なイージングを再現できます。すべてブラウザ内で動作し、アップロード・保存・ログ記録は一切ありません。サインアップ不要で完全無料です。
Frequently asked questions
CSSのcubic-bezierとは何ですか？
cubic-bezier()はベジェ曲線によって定義されたイージング（タイミング）関数です。transition-timing-functionまたはanimation-timing-functionでcubic-bezier(x1, y1, x2, y2)と書きます。2つの制御点が曲線を曲げ、アニメーションが一定速度ではなく加速・減速するようにします。例えば、cubic-bezier(0.25, 0.1, 0.25, 1)はCSSキーワード「ease」とまったく同じイージングです。
cubic-bezierの4つの値はどのように機能しますか？
cubic-bezier(x1, y1, x2, y2)は2つの制御点を指定します：P1 = (x1, y1)が曲線の始まりを引き、P2 = (x2, y2)が終わりを引きます。曲線自体は常に(0,0)から始まり(1,1)で終わります。x値は時間を表し0から1の間に収まる必要があります；y値は進行度を表しオーバーシュート効果のために0を下回ったり1を超えたりできます。グラフの2つのハンドルをドラッグすると、4つの数値が動かすたびにリアルタイムで更新されます。
ease、ease-in、ease-out、ease-in-outの違いは何ですか？
linearはイージングなしで一定速度で動き、ほとんどのUIには不自然に見えます。ease — CSSのデフォルト — 少し速く始まってから緩やかになります。ease-inはゆっくり始まり最後に加速し、何かが落ちるような感覚になることが多いです。ease-outは速く始まって減速し、画面に現れる要素には最も自然に感じられます。ease-in-outは両端が遅く真ん中が最も速く、画面を横切って滑らかに止まる要素に最適です。
cubic-bezierのy値は1を超えたり0を下回ることができますか？
y値はそれが可能で、それによってオーバーシュートとアンティシペーション効果を得られます。x（時間）値は常に0–1に固定されますが、1を超えるyは要素が目標を行き過ぎてから戻ってくるようにし — ばねのように — 0を下回るyは最初に引き絞るようにします。古典的な例はeaseOutBack = cubic-bezier(0.34, 1.56, 0.64, 1)です。このエディターは0–1ボックスの外にハンドルをドラッグしてそれらの効果を作れます。
CSSトランジションやアニメーションでcubic-bezierをどう使いますか？
タイミング関数スロットに入れます。トランジションの場合：transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);。キーフレームアニメーションの場合：animation: slide 600ms cubic-bezier(0.33, 1, 0.68, 1) both;。このツールのCSSタブは現在の曲線と時間を使って両方のスニペットを自動生成するので、スタイルシートに直接コピー＆ペーストできます。
easeInOutQuadのような名前付きイージングをcubic-bezierに変換するには？
プリセットカタログから読み込んでください — Penner / easings.netの曲線にはすべて標準的なcubic-bezier近似値があります。例えばeaseInOutQuad = cubic-bezier(0.45, 0, 0.55, 1)、easeOutCubic = cubic-bezier(0.33, 1, 0.68, 1)、easeInOutCubic = cubic-bezier(0.65, 0, 0.35, 1)。ギャラリーから名前付き曲線を選んでCSSに値を直接コピーしてください。
このcubic-bezierジェネレーターは無料でプライベートですか？
完全無料、サインアップ不要、何もどこにもアップロードされません。曲線エディター、ライブプレビュー、CSS・GSAP・JavaScriptエクスポートはすべてブラウザ内でローカルに動作します。作成したものはサーバーに送信されないため、作業内容はすべてデバイス上に留まります。URLに4つの値をエンコードしたリンクで曲線を共有することもできます — アカウント不要です。
Related tools
すべてのツールを見る
新着 カラーミキサー
2色を任意の比率で混ぜ合わせ、結果や各段階の色をコピー。
新着 画像カラーピッカー
画像から好きな色を抽出し、主要なパレットをHEX・RGB・HSLで取得できます。
新着 Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
新着 Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
カラーピッカー＆コンバーター
色を選んで、HEX・RGB・HSL・OKLCH間で変換。
新着 カラーコントラストチェッカー
テキストと背景色のWCAG AA/AAAコントラスト比をチェック。