スタイル

角度・色・形状を調整してリアルタイムにプレビューし、CSS をコピー。線形・放射状・円錐の三種類に対応し、中間のカラーストップも使えます。

四隅の角丸を調整し、プレビューを見ながら CSS をコピー。px・rem・% に対応。% が楕円になる理由もプレビューで分かります。

ぼかし・透明度・彩度・枠線を調整してグラスモーフィズムをプレビューし、CSS をコピー。-webkit- 接頭辞つきで iOS でも実際にぼけます。

距離・ぼかし・強さ・凹凸を調整してニューモーフィズムをプレビューし、CSS をコピー。二つの影の色は背景色から算出し、色相は保ちます。

色と強さを調整してネオンの光り方をプレビューし、CSS をコピー。text-shadow を重ね、暗い背景で確認できます。

対象プロパティ・時間・イージング・遅延を選び、マウスを乗せてプレビューし CSS をコピー。出力では transition と :hover を分けて書きます。

キーフレームのプリセット七種（フェード・スライド・ポップ・パルス・シェイク・回転・浮遊）。時間と曲線を調整し、動きを減らす設定にも対応。

色と強さを調整してグリッチ テキストをプレビューし、CSS をコピー。ずらした二つの複製を帯状にクリップし、data-text の書き方も示します。

ぼかし・コントラスト・サイズを調整して液体変形（グーイー）をプレビューし CSS をコピー。近づいた図形の間に橋が伸びます。

軸・時間・透視距離を調整して 3D カードの回転をプレビューし CSS をコピー。三つの重要なプロパティを明記しています。

2つの制御点をドラッグしてイージング曲線を作り、動きをその場で確認。cubic-bezier() と transition / animation での書き方をコピーできます。

ボタンで flex-direction・justify-content・align-items などを切り替え、変化をその場で確認。CSS と対応する HTML をまとめてコピーできます。

方向・文字サイズ・列間隔・高さを調整して縦書きをプレビューし、CSS をコピーできます。高さが列の折り返し位置を決めます。

方向・色帯の数・明度を調整して虹色グラデーション文字をプレビューし、CSS をコピーできます。グラデーションは文字の形に切り抜かれます。

プレビュー枠にマウスを乗せると、各 cursor キーワードの見た目が分かります。30 以上あるうち半分は名前からは想像できません。

幅のブレークポイント（範囲の端が 0.02px の隙間なく接します）・暗色モード・動きの削減・印刷などの @media ブロックを生成します。プレビュー付き。

scroll-snap-type と scroll-snap-align を生成します。横・縦の吸着と 3 種類の揃え位置に対応。プレビューをドラッグすると吸着が分かります。

オフセット・ぼかし・広がり・色・レイヤー数を調整し、box-shadow をその場で確認。内側の影と 2〜5 層、5 つのプリセットに対応。

ぼかし・明るさ・コントラスト・彩度・グレースケールなど 9 項目をスライダーで調整。filter と backdrop-filter を切り替え、5 つのプリセット。

グラデーションを文字に切り抜きます。線形・放射状・円錐、2〜4 色、プレビュー付き。接頭辞・フォールバック・選択時の補正も出力。

実線・破線・点線・二重線・3D の溝と隆起・波形パターン。四隅の角丸を個別に設定し、片辺のみの描画と border-image のパターンにも対応。

calc() の式を書くと、その場で構文を検証して計算します。足し算と引き算の空白抜けや単位の食い違いを即座に指摘します。

bg-blue-500 のような Tailwind クラス名と #hex・rgb()・hsl() を相互変換し、22 色系の既定パレットから最も近い色名と色差を求めます。

透明な下地の CSS を生成します。チェッカー（格子）または 45° の斜めの縞で、前景色・背景色・セルサイズを調整できます。

質量・剛性・減衰・初速を調整すると、Framer Motion の spring パラメーター、60 点にサンプリングした CSS linear()、減衰比と行き過ぎの判定が得られます。