デザインツール — 無料オンライン
13 ツールカラーピッカー、グラデーションビルダー、シャドウジェネレーター、CSSユーティリティなど、デザインとCSSのためのツール。
WCAG＆APCAコントラストチェッカー
WCAG 2.1比率と最新APCAスコアで色のアクセシビリティを検証。リアルタイム視覚シミュレーション付き。
CSSアニメーションジェネレーター
ライブプレビュー・イージング制御付きで高性能キーフレームアニメーションをビジュアルに設計。
CSS Border Radiusジェネレーター
高度な8点CSS境界半径をビジュアルに作成。円形、有機的ブロブ、装飾的シェイプのデザインに。
CSS Box Shadowジェネレーター
リアルタイムプレビュー・インセット対応で高度な多層CSSボックスシャドウをビジュアルに設計。
CSSフィルタージェネレーター
ブラー、コントラスト、明るさ等のCSSフィルターをライブプレビュー・コードエクスポート付きで画像にリアルタイム適用。
CSS Flexboxジェネレーター
コンテナ・アイテムプロパティのインタラクティブサンドボックスで柔軟なレイアウトをビジュアルに設計。
CSS Gridジェネレーター
複雑な2Dレイアウトをビジュアルに設計。ドラッグでグリッドエリアを作成、トラック調整、クリーンなCSS出力。
PX⇔REM変換ツール
双方向px/rem変換。Tailwind CSSマッチング、流動clamp()タイポグラフィ生成、一括CSS変換対応。
SVG→CSS変換ツール
SVGアイコンを最適化CSSデータURIに変換。background-image、mask-image、Tailwind出力形式対応。
ファビコンジェネレーター
テキスト・絵文字・画像からICO、PNG、SVG、PWAバンドル形式でファビコンを生成。ダークモード対応。
CSSグラデーションジェネレーター
OKLCH補間・粒状テクスチャオーバーレイ付きで線形、放射状、円錐型CSSグラデーションをビジュアルに作成。
カラーパレットジェネレーター
OKLCHで6種のハーモニーモードを使用して調和的カラーパレットを生成。WCAGコントラスト マトリックス・CSS/Tailwind/JSONエクスポート。
カラーピッカー
インタラクティブHSVキャンバスで色を選択。HEX、RGB、HSL、OKLCH間の変換・白黒に対するWCAGコントラスト比チェック。