デザインと配色 ツール

シードから有機的な blob 形状を生成。頂点数・ランダム度・なめらかさを調え、SVG パスか CSS border-radius をコピー。

ボタンの余白・角丸・色・影・ホバー状態を視覚的に設定し、CSS をその場でコピーできます。

カードの余白・角丸・影・枠線・ホバー効果を視覚的に設定し、CSS をその場でコピーできます。

polygon の頂点を視覚的に編集し、プリセットも使って clip-path を生成。CSS をコピーできます。

WCAG 2.1 の AA と AAA 基準で前景色と背景色のコントラストを判定します。どの形式でも貼り付け可能です。

1000K から 12000K の色温度を sRGB の RGB・Hex に変換し、プレビューと白平衡の目安を表示します。

インタラクティブな色輪で色を選び、補色・三角・類似・分裂補色の配色を生成。

CSS Grid レイアウトを視覚的に構築。行数・列数・トラックサイズ・ギャップ・配置を設定し、CSS をコピーできます。

ブラウザで CSS cursor ルールを生成。組み込みキーワードか小さい画像を選び、ホットスポットとフォールバックを設定してライブプレビュー。

内蔵リストから見出し用・本文用のフォントを選び、組み合わせをプレビューして CSS をコピーできます。

CSS ローディングアニメーションを生成。スピナーリング・バウンドするドット・プログレスバー・パルス・スケルトンをコピー。

知覚均一な OKLCH 色空間で色を調整し、sRGB フォールバック付きの oklch() CSS をコピー。

ストライプ・ドット・グリッド・チェッカーを背景にタイル敷き。サイズ・色・角度を設定し、CSS か SVG をコピー。

スマートフォン・タブレット・ノートパソコン・ディスプレイの解像度・DPR・ビューポートを照会。

webkit スクロールバーを視覚的に調整。サイズ・トラック・つまみ・ホバー・角丸を決めて CSS をコピー。

基準サイズと比率から間隔スケール（T シャツサイズ）を生成し、px と rem を確認して CSS 変数をコピーできます。

色の停止点と角度を選び、CSS の background-clip で作るグラデーション文字をその場でコピー。

移動・回転・スケール・スキューを視覚的に組み合わせ、任意の原点で CSS transform を生成してコピーできます。

プロパティ・長さ・遅延・イージングを設定し、実演で確かめて CSS transition をコピーできます。

セクション区切り用の層状ウェーブ SVG を生成。層数・振幅・波長・高さ・色を設定して SVG をコピー。