デザイン

デザイン、フロントエンド開発、一貫したビジュアル表現のために、HEX、RGB、HSL などの形式でカラーを変換します。

CSSグラデーションを視覚的に作成し、種類、角度、中心位置、カラーストップ、不透明度を調整して、UI背景、コンポーネント状態、ブランド表現に使えます。

CSS の box-shadow をオフセット、ぼかし、広がり、色、不透明度から視覚的に調整し、多重・内側・発光に対応してコードをコピーできます。

テキスト、アイコン、ボタン、UI コンポーネントのコントラストを WCAG AA および AAA のアクセシビリティ要件に照らして確認します。

ベース色一つから OKLCH カラースケール、配色、ニュートラルパレット、読みやすいテキストカラー、CSS 変数、JSON を生成します。

ドット、グリッド、斜線、三角、波などのタイル状 SVG 背景パターンを作成し、CSS をコピーするか単体 SVG をダウンロードできます。

Flexbox と CSS グリッドのレイアウトを視覚的に作成し、プレビューしながらそのまま使える CSS をコピーできます。

制御点をドラッグして CSS の三次ベジェイージング曲線を視覚的に描き、動きをプレビューしながらタイミング関数をコピーできます。

フェード、スライド、ズーム、注目効果、回転のライブラリから CSS キーフレームアニメーションを選び、ライブプレビューして @keyframes と animation をコピーできます。

調整可能なルートフォントサイズを基準に px・rem・em・pt・% を変換し、モジュラータイプスケールやフルイド clamp() を生成、CSS の px を一括で rem に変換します。