ease や ease-in-out との違いは?

CSS の組み込みキーワード ease / ease-in / ease-out / ease-in-out はそれぞれ固定の cubic-bezier 値です。本ツールでは同じ値を「プリセット」ボタンに収録しつつ、自由に値を変えてオリジナルの easing を作れます。

Y 軸が 0〜1 を超えるのはバグですか?

バグではありません。cubic-bezier() は CSS 仕様上 X (時間軸) のみ 0〜1 に制限され、Y (進捗) はその範囲を超えてオーバーシュートできます (back 系の easing がそれです)。本ツールでは Y は −1〜2 の範囲でスライダー操作・ドラッグできます。

ステップ関数 (steps()) や jump-* には対応していますか?

本ツールは cubic-bezier() 専用です。steps() は別軸のタイミング関数で、補間ではなく不連続な階段状の変化を扱います。今後の別ツールで対応する可能性があります。

プレビューのバーがカクつきます。

ブラウザの CSS transition で実装しているため、極端な back / overshoot や非常に短い duration (< 200ms) ではフレーム落ちが目立つことがあります。設計上の最適な duration を見るためにも、duration スライダーで秒数を上下させて感触を確認するのがおすすめです。

入力データはサーバーに送信されますか?

いいえ。すべてブラウザ内で処理され、外部送信はありません。

開発へ戻る

CSS easing ビルダー — cubic-bezier(x1,y1,x2,y2) GUI 編集

CSS の transition / animation で使う cubic-bezier() を、SVG プレビュー曲線 + ドラッグできる制御点 + 数値スライダーの 3 通りから組み立てるビルダー。ease / ease-in / ease-out / ease-in-out などの標準プリセット、Material 風の cubic、back (オーバーシュート) も収録。動きの実プレビュー (バーが画面端まで往復) で実際の感触を確認できます。出力は cubic-bezier(...) 値とそのまま貼れる transition-timing-function 宣言を切替可能。すべてブラウザ内で計算します。

開発生成

使い方

1. プリセットボタン (ease / ease-in-out / ease-in-back …) でよく使う形を一発設定できます。出発点としてどれかを選ぶのが速いです。 2. 「曲線プレビュー」上の青 (P1) とオレンジ (P2) の点をドラッグして、自分好みの形に微調整します。Y 軸は 0〜1 の範囲外 (back / overshoot) もドラッグで届きます。 3. 数値で詰めたい場合は「制御点」セクションのスライダーまたは数値入力を直接編集します (3 つのビューは互いに連動)。 4. 「動きのプレビュー」のバーで実際の感触を確認します。意図通りなら CSS 出力をコピーして transition / animation の timing-function に貼り付けます。

よくある質問

ease や ease-in-out との違いは?: CSS の組み込みキーワード ease / ease-in / ease-out / ease-in-out はそれぞれ固定の cubic-bezier 値です。本ツールでは同じ値を「プリセット」ボタンに収録しつつ、自由に値を変えてオリジナルの easing を作れます。
Y 軸が 0〜1 を超えるのはバグですか?: バグではありません。cubic-bezier() は CSS 仕様上 X (時間軸) のみ 0〜1 に制限され、Y (進捗) はその範囲を超えてオーバーシュートできます (back 系の easing がそれです)。本ツールでは Y は −1〜2 の範囲でスライダー操作・ドラッグできます。
ステップ関数 (steps()) や jump-* には対応していますか?: 本ツールは cubic-bezier() 専用です。steps() は別軸のタイミング関数で、補間ではなく不連続な階段状の変化を扱います。今後の別ツールで対応する可能性があります。
プレビューのバーがカクつきます。: ブラウザの CSS transition で実装しているため、極端な back / overshoot や非常に短い duration (< 200ms) ではフレーム落ちが目立つことがあります。設計上の最適な duration を見るためにも、duration スライダーで秒数を上下させて感触を確認するのがおすすめです。
入力データはサーバーに送信されますか?: いいえ。すべてブラウザ内で処理され、外部送信はありません。

類似のツール

CSS シャドウビルダー — box-shadow / text-shadow を GUI で組み立て

CSS の box-shadow と text-shadow を GUI で組み立てるツール。Mode で box / text を切り替え、offset-x / offset-y / blur / spread (box のみ) / color / inset (box のみ) をスライダーと数値入力で調整。多重シャドウ (カンマ区切りで複数重ね) に対応し、Material Design 風の影や Neumorphism / 文字の縁取り / 蛍光グローなど 9 種類のプリセットからワンクリックで開始。ライブプレビュー (実 div / 実テキスト) + 値だけ / 宣言付きコピー切替対応。gradient-css の対称ツールとして CSS スタイル系のロングテール需要を満たします。すべてブラウザ内で処理。

開発生成

CSS グラデーション生成 (linear / radial / conic)

linear-gradient / radial-gradient / conic-gradient の 3 種類を **Mode 切替** で組めるブラウザ完結ビルダー。色ストップを追加・削除しながらライブプレビュー、角度 (linear / conic) や形・サイズ (radial)、中心位置 (radial / conic) を調整、CSS 文字列を `background: ...` 形式または値だけで出力します。Tailwind の任意値クラス `bg-[linear-gradient(...)]` にもそのまま貼れる形式。プレビュー / 計算はすべてブラウザ内で完結し、サーバーへ送信しません。

色生成

カラー変換 — HEX / RGB / HSL / HSV を相互

HEX・RGB・HSL・HSV をリアルタイムに相互変換できるカラーピッカー付きツール。どの欄を編集しても他の 3 表記が即座に追従。すべてブラウザ内で動作し、入力した色情報は外部に送信されません。

開発色変換

バーコード生成 — JAN / EAN / UPC / CODE128 / CODE39

数字や文字列を 1 次元バーコード (JAN-13 / EAN-13・JAN-8 / EAN-8・UPC-A・CODE128・CODE39・ITF・Codabar/NW-7・MSI) に変換し、PNG / SVG として保存できます。バーの太さ・高さ・色・余白や、下部の数字表示の有無を細かく調整可能。チェックディジットの検証も自動で行います。生成はすべてブラウザ内で完結し、入力した値が外部に送信されることはありません。

開発生成画像