デザイン・CSS

コードスニペットを、ブラウザ内で構文ハイライト付きの画像に変換します。20 以上の言語、テーマや背景のカスタマイズ、行番号、PNG／SVG 書き出しに対応。

文字色と背景色の WCAG 2.1 コントラストと APCA Lc スコアをチェックし、AA・AAA・3:1 バッジを確認して、最も近い合格色を適用できます。

2 つの HEX 色を指定した比率で RGB または Lab 色空間で混ぜ、できあがった中間色を色見本とコピー可能な HEX 値で表示します。

1 つの基準 HEX 色を OKLCH・HSL・RGB のシェードスケールに変換。段階数を調整でき、段階ごとの WCAG コントラストの目安と CSS・Tailwind・JSON 出力に対応します。

画像をアップロードして、1型・2型・3型色覚や全色盲での見え方をプレビューし、シミュレート結果をダウンロードできます。

8 つの border-radius の角の値（楕円の水平・垂直半径を含む）を調整し、ライブプレビューを見ながらショートハンド CSS をコピーできます。

オフセット・ぼかし・広がり・色・inset の各コントロールで多重レイヤーの CSS box-shadow を作り、すぐ使える box-shadow プロパティをコピーできます。

最小・最大のフォントサイズと最小・最大のビューポート幅を、ブレークポイント不要の流体タイポグラフィ用 CSS clamp() 式 1 行に変換します。

円・楕円・多角形・inset・角丸 inset のプリセットと数値入力から CSS clip-path を作り、ライブプレビューを見ながらすぐ使えるプロパティをコピーできます。

ハンドルをドラッグして CSS の cubic-bezier または steps() イージングを編集し、ライブアニメーションでプレビューして値をコピーできます。

CSS Flexbox や Grid をビジュアルに構築。コンテナーとアイテム別の設定、カスタムトラックサイズ、grid-template-areas エディターで、生成した CSS をコピーできます。

ぼかし・透明度・彩度・枠線・影のコントロールと色合いで backdrop-filter ベースのすりガラス CSS を生成し、背景の上でプレビューしてコピーできます。