AIデザインツール

幅と高さから最も単純な整数比を求め、16:9 などの一般的な比率を判定、片方からもう片方を算出。

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

四隅を独立スライダーで調整し、ライブプレビューを見ながら最短の CSS 略記をコピー。

スライダーで X/Y・ぼかし・広がり・色を調整し、ライブ プレビューとコピー可能な box-shadow CSS を出力。

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

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

2 色を 5 つのブレンドモードで混ぜ、結果を HEX・RGB・HSL・CSS としてコピーできます。

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

画像やカラー 1 色から、P 型・D 型・T 型の 3 色覚での見え方を即座に比較。

5 つのプリセット + 時間・遅延・イージング・反復を調整し、@keyframes をそのままコピー。

リニア/ラジアルの CSS グラデーションを構築：複数カラーストップ、ライブプレビュー、コードをコピー。

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

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

flex コンテナの 5 大プロパティをリアルタイム調整。生成 CSS はそのままコピー可能。

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

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

ベースカラー 1 色から補色・トライアド・アナロジー・モノトーンのパレットを生成。

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

サイズと配色を自由に設定できるプレースホルダー画像：PNG を即ダウンロード、同等 SVG コード付き。

スクリーンショットに角丸・余白・グラデーション背景・影を付けて PNG に書き出し。

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

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

サイズ・配色・文字・角丸を指定した SVG プレースホルダーを生成。コピーもダウンロードも自由。

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

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

基準サイズと比率を選ぶだけで h1 から caption までの字階と CSS 変数を生成。

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