デザイン & CSS
ライブのローカルプレビューで、実用的な色とCSSを生成します。
カラー変換
HEX、RGB、HSLの色を変換し、正確な結果をプレビューします。
ツールを開く →CSSグラデーションジェネレーター
2色の線形グラデーションを作成し、本番環境でそのまま使えるCSSをコピーします。
ツールを開く →WCAG コントラストチェッカー
2つの色のコントラスト比を計算し、一般的なWCAG AAおよびAAAのテキスト基準を確認します。
ツールを開く →CSSボックスシャドウジェネレーター
ライブカラー、オフセット、ぼかし、広がりの値を使って box-shadow を作成します。
ツールを開く →CSSテキストシャドウジェネレーター
選択した背景に対して、読みやすい text-shadow 宣言を作成し、プレビューします。
ツールを開く →CSSボーダー半径ジェネレーター
4つの独立した角の半径を設定し、生成されたCSS宣言をエクスポートします。
ツールを開く →レスポンシブCSSクランプジェネレーター
ビューポート幅にわたって最小サイズと最大サイズの間で流動的なクランプ式を計算します。
ツールを開く →PX ↔ REM 変換ツール
明示的なルートフォントサイズを使用して、アクセシブルなレイアウト向けにピクセルとrem単位を変換します。
ツールを開く →CSS三角形ジェネレーター
サイズと色を設定できる、4方向対応のゼロサイズCSSボーダートライアングルを生成します。
ツールを開く →カラーシェードジェネレーター
HEXカラーから、コピー可能なCSS変数を備えた、明るい色から暗い色までの決定論的な階調スケールを作成します。
ツールを開く →CSSローダージェネレーター
サイズ、太さ、速度、色を設定できる、軽量でアクセシブルなスピナーを生成します。
ツールを開く →CSS詳細度計算ツール
ID、クラス、属性、擬似クラス、要素セレクターのセレクター詳細度を計算して比較します。
ツールを開く →CSSイージング関数ビルダー
cubic-bezier の制御点を検証し、再利用可能なトランジションのタイミング CSS を生成します。
ツールを開く →CSSカスタムプロパティ抽出ツール
CSS変数の宣言、重複した定義、およびその最新の解決済みテキスト値を見つけます。
ツールを開く →CSSメディアクエリビルダー
明示的なレスポンシブ条件から、幅・向き・モーション設定のメディアクエリを生成します。
ツールを開く →CSSカラー値抽出ツール
貼り付けたCSSからHEX、RGB、HSL、および最新の関数形式のカラー値を抽出して数えます。
ツールを開く →CSSサポートルールビルダー
1 つの検証済み CSS 宣言から、肯定的な機能クエリとフォールバック機能クエリを生成します。
ツールを開く →CSSフォントスタックビルダー
明示的な汎用フォールバックを含む、重複を除いた引用付きの font-family スタックを作成します。
ツールを開く →CSS Z-Index アナライザー
スタイルシートを実行せずに、数値の z-index 宣言を抽出し、重なり順の値を順位付けします。
ツールを開く →CSSアニメーションの継続時間監査ツール
インベントリアニメーションとトランジションの時間、および reduced-motion の処理があるかどうかを報告してください。
ツールを開く →CSSブレークポイント一覧
min-width と max-width のメディアクエリのブレークポイントを抽出し、その頻度と順序を報告してください。
ツールを開く →CSS 論理プロパティ チェッカー
writing-mode に対応したレイアウトのために、物理方向の CSS プロパティと流れに沿った CSS プロパティの使い分けを比較します。
ツールを開く →CSSフォントサイズ一覧
値と単位によって font-size 宣言を抽出し、一貫性のないタイポグラフィのスケールを明らかにします。
ツールを開く →CSS Grid トラックアナライザー
repeat と minmax の使用概要を含む、在庫の grid-template の行および列の宣言。
ツールを開く →このページに一致するツールはありません。