デザインツール
カラーパレット、タイポグラフィツール、スペーシング計算機、UIデザインユーティリティ。
Tailwind Color Reference
Browse all Tailwind CSS color palettes with hex and RGB values.
Spacing Scale Generator
Generate consistent spacing scales for your design system.
Font Pairing Guide
Discover harmonious font combinations for headings and body text.
Line Height Calculator
Calculate optimal line height for readable typography.
Data URL Encoder
Convert files to base64 Data URLs for embedding in HTML and CSS.
ブレークポイントビジュアライザー
Tailwind、Bootstrap、カスタムフレームワークのCSSブレークポイントを視覚化します。
デザイントークンコンバーター
デザイントークンをJSON、CSS変数、SCSS形式に変換します。
ワイヤーフレームカラーパレット
ワイヤーフレームとプロトタイプ用のニュートラルカラーパレットを生成します。
CSSカーソルジェネレーター
全CSSカーソルタイプをライブプレビュー付きで確認しコードをコピーします。
アイコンサイズリファレンス
iOS、Android、Web、デスクトップアプリの標準アイコンサイズです。
CSSグリッドジェネレーター
CSSグリッドレイアウトを視覚的に構築してCSSコードをコピーします。
カラースキームジェネレーター
ベースカラーから補色、三角色、類似色スキームを生成します。
ボーダーラジウスビジュアライザー
CSSのborder-radius値をリアルタイムでプレビュー・比較します。
グラデーションメッシュ生成器
複数のカラーポイントで滑らかなCSSメッシュグラデーション背景を生成します。
不透明度ティント生成器
任意の色から不透明度バリエーションで完全なティントパレットを生成します。
文字間隔生成器
CSSのletter-spacingとword-spacingをプレビューして生成します。
アニメーションタイミング生成器
CSSアニメーションタイミング(cubic-bezier)生成器とビジュアルカーブプレビュー。
Z-Index マネージャー
CSSのz-indexスタッキングコンテキストビジュアライザー。
スクロールスナップジェネレーター
ライブプレビューとコピー対応コードでCSSスクロールスナッププロパティを生成します。
CSSクリップパスジェネレーター
ビジュアルエディターとライブプレビューでCSS clip-pathシェイプを作成します。
CSSフィルタージェネレーター
blur、brightness、contrastなどCSSフィルター効果をライブプレビューで調整してCSSをコピーします。
Flexboxジェネレーター
ビジュアルエディターとライブプレビューでCSSフレックスボックスのレイアウトコードを生成します。