デザインとカラー ツール

階層化されたボックスのシャドウを視覚的にデザインし、制作可能な CSS をコピーします。

複数のカラーストップを使用して、線形、放射状、円錐形のグラデーションを作成します。

各コーナーを個別に制御し、有機的な形状や錠剤をプレビューします。

ライブスウォッチとコントラストヒントを使用して、HEX、RGB、HSL、HSV の間で変換します。

テキストのコントラスト比を測定し、通常のテキストと大きなテキストの AA/AAA 準拠を確認します。

ピクセルを rem に変換し、構成可能なルート フォント サイズに戻します。

フレックスボックス レイアウトを視覚的に構築し、CSS をコピーします。

レスポンシブな CSS グリッドの列、行、ギャップを視覚的に作成します。

境界線トリックを使用して、任意の方向に CSS 三角形を作成します。

ぼかし、色合い、境界線、影を付けた曇りガラスのカードを作成します。

WebKit および Firefox の CSS プロパティを使用してスクロールバーのスタイルを設定します。

タイミングを構成可能なフェードアンドスライドのキーフレーム アニメーションを作成します。

ビューポート間でスムーズに拡大縮小する Clamp() フォント サイズを作成します。

ぼかし、明るさ、コントラスト、彩度、色相のフィルターを視覚的に組み合わせます。

ベースカラーから補色、類似、三項および四項のパレットを生成します。

任意のベースカラーから 5 つのティントと 5 つのシェードを作成します。

セクション分割線と背景の滑らかな SVG ウェーブ パスを生成します。

システム フォントを使用して、見出しと本文のフォントの組み合わせをプレビューします。

UI と散文用の既製のシステム フォント スタックをコピーします。

レイヤードテキストシャドウをデザインし、CSSをコピーします。