魅力的なCSS効果を、視覚的かつ高速に生成。
モダンな CSS の対話型プレイグラウンド。グラスモーフィズム、多層シャドウ、OKLab で補間するグラデーション、有機的な角丸、フィルター — 生成されたコードは常に画面に。
CSS プレイグラウンド
左側のコントロールを変更すると、リアルタイムでスタイルが反映されます。
ボタンスクロールでカーソル位置を拡大、ドラッグで移動、B を押している間はスタイルなしの状態と比較できます。
PNG はスクリーンショットではなく、同じ値からキャンバス上に描き直すため、どのサイズでも鮮明なままです。
.glass-card {
background: #ffffff24;
backdrop-filter: blur(16px) saturate(140%) brightness(105%);
-webkit-backdrop-filter: blur(16px) saturate(140%) brightness(105%);
border: 1px solid #ffffff38;
border-radius: 24px;
box-shadow: 0 8px 32px 0 #00000036, inset 0 1px 0 0 #ffffff38;
}既存の CSS を貼り付け+
box-shadow、グラデーション、border-radius、filter — ルール全体でも — を貼り付けると、コントロールがその値に合わせて動きます。
使い方
効果を選ぶ
ガラス、多層シャドウ、グラデーション、角丸、フィルター — 1つのプレビューを共有する5つのジェネレーター。
調整する
スライダーを動かすか、正確な数値を入力。どの変更も「元に戻す」一回分です。
確かめる
カーソル位置で拡大し、動かして見て、長押しでスタイルなしの状態と比べられます。
持ち出す
CSS・Tailwind・SCSS・変数をコピーし、リンクを共有し、PNG を別のツールへそのまま送れます。
多層シャドウ
本物の立体感に必要なだけレイヤーを重ね、どれでも消音でき、うまくいった一枚をそのまま複製できます。
現代的な色空間
グラデーションを OKLab や OKLCH で補間して sRGB のバンディングをなくし、どの値も HEX・RGB・HSL・oklch() で出力できます。
CSS を貼り戻す
手元にあるルールを放り込めば、目分量で作り直さなくてもスライダーがその値に合わせて動きます。
有機的な角
8点指定の border-radius に、生きたプリセットの一覧と、思いどおりの形を書ける手入力欄。
軽い取り消し履歴
ピクセルではなく数値を保存する60ステップの取り消し。メモリを食いつぶしません。
そのまま次のツールへ
表面を PNG に描き出し、ダウンロードを挟まずに CompressSnap・CropSnap・MemeBolt へ送れます。
ブラウザの外に出ない
アップロードもアカウントもサーバー往復もなし。画像はこのタブから出ません。
キーボード前提の設計
1〜5 でジェネレーターを切り替え、Ctrl+Z で取り消し、Alt でスライダーを10倍細かく動かせます。
魅力的なCSS効果を、視覚的かつ高速に生成。
モダンなスタイルづくりが、テキストエディタで数値を当てずっぽうに変える作業である必要はありません。5つのジェネレーターが1つのライブプレビューを共有します。スライダーでも正確な数値でも調整でき、スタイルなしの状態と比べられ、いつでも取り消せて、結果はコード・リンク・PNG のどれでも持ち出せます。
100%クライアントサイド処理
すべてのスタイルはブラウザ上でコンパイルされます。データ送信がないため、極めて高速かつ安全です。
フロントエンド開発者とUI/UXデザイナーのための究極のCSSコンパニオン。
カード、ボタン、背景、オーバーレイパネルを素早くデザイン。UIモックアップやプロトタイプ開発に最適です。
あなたのCSSレシピはプライベートに保たれます。すべてローカルマシン上で行われ、デザインを保存・追跡・アップロードすることはありません。
よくある質問
Q料金はかかりますか？+
いいえ、CSS Designerは完全に無料でご利用いただけます。
QTailwindに対応していますか？+
はい。カスタム値を適用したTailwindのクラス名も同時に生成されます。
QGlassmorphismとは何ですか?+
Glassmorphismはすりガラスを模したUIトレンドです。backdrop-filterのぼかしと半透明の背景を使い、カラフルな背景の上に要素をエレガントに重ねます。
Qモバイルでも動作しますか?+
もちろんです。レイアウトはスマートフォン、タブレット、デスクトップに最適化されており、外出先でもコーディングできます。
Qすでにある CSS ルールを貼り付けられますか？+
はい。コードパネルの下にある「既存の CSS を貼り付け」を開き、box-shadow、グラデーション、border-radius、filter を入れてください。ルール全体でも構いません。コントロールがその値に合わせて動くので、そこから編集を続けられます。
QOKLab や OKLCH で補間すると何が変わりますか？+
sRGB での補間は、グラデーションの中間を灰色でくすんだ領域に引きずり込みます。OKLab と OKLCH は知覚される明るさを一定に保つので、紫からピンクへの変化が端から端まで鮮やかなままです。生成される CSS には標準の「in oklab」構文が入ります。
QPNG 書き出しはスクリーンショットですか？+
いいえ。プレビューと同じ数値からキャンバス上に描き直しているので、1600×900 でも 1080×1920 でも鮮明です。ダウンロードを挟まず、そのまま別の oLoveTools のツールへ送れます。
Q自分の画像を追加すると何かアップロードされますか？+
いいえ。画像はタブ内でデコードされ、プレビューの背景として使われるだけです。パレットの抽出もあなたの端末で動き、しかもボタンを押したときだけ実行されます。