デザインツール

CSS Flexbox＆Gridレイアウト生成器

CSS FlexboxとGridレイアウトをビジュアルに設定・プレビューし、コードを即時コピーします。

カラーパレット生成器

ランダムまたはベースカラーから美しいパレットを自動生成します。

SVG 最適化・圧縮ツール

SVGコードをローカルで最適化・クリーンアップし、ファイルサイズ比較とライブプレビューを表示します。

CSSグラデーション生成器

線形・放射形グラデーションをビジュアルに作成し、ワンクリックでCSSコードをコピーします。

色変換とコントラスト比チェッカー

HEX/RGB/HSL/CMYKの相互変換と、WCAG 2.1アクセシビリティコントラスト比をチェックします。

CSSシャドウ＆グラスモーフィズム生成器

CSSシャドウと背景ぼかし効果をリアルタイムで調整し、CSSコードをコピーします。

カラーコントラスト分析と色覚模擬

背景と文字のコントラスト比をWCAG 2.1基準で即時計算し、配色の自動修正を提供。ドラッグ＆ドロップ画像からの色抽出や4つの色覚障害フィルター表示をサポートします。

物理演算パーティクル＆重力シミュレータ

重力、弾力、摩擦、ジャイロ重力、マウス吸引をサポートする2D物理演算パーティクルシミュレータ。マスコットのアルパが物理粒子となって跳ね回ります！

ビジュアル SVG Path エディタ

500×500 のキャンバスでアンカーを打ち、ベジェのハンドルをドラッグするだけで、SVG パスの d 属性と CSS clip-path: path() コードを即座に生成。ハートや星のテンプレート付き。

ブラウザモックアップ＆スクリーンショット美化器

ウェブページのスクリーンショットをアップロードするだけで、macOS 風のウィンドウ枠、ドロップシャドウ、グラデーション背景を合成し、高解像度 PNG で書き出せます。

CSS ネオンテキスト＆発光文字生成器

多層text-shadow、ネオン色、輝き半径、呼吸点滅アニメーションを設定し、CSSコードをコピーします。

画像スポイトツール・ピクセル拡大ルーペ

ローカル画像を読み込み、ピクセル単位の精密拡大ルーペで色を抽出。HEX/RGB/HSLのコピーとWCAGコントラスト比の診断に対応。