透明度（アルファ値）は扱えますか？

グラデーション方向ガイドの処理内容によりますが、rgba()やhsla()の表記が必要な場合はそれぞれに対応したツールを使用してください。HEXの8桁形式（#RRGGBBAA）もアルファ値を含みます。

対応しているブラウザは？

Chrome、Safari、Firefox、Edgeなど主要モダンブラウザの最新版で動作確認しています。Internet Explorerや極端に古いバージョンは対象外です。

カラー無料登録不要

グラデーション方向ガイド

CSSグラデーションの方向指定(角度/キーワード)の一覧と視覚ガイドを表示する無料オンラインツール。

入力

結果

--- 方向キーワード ---
to top          0deg    ↑
to right        90deg   →
to bottom       180deg  ↓  (デフォルト)
to left         270deg  ←
to top right    45deg   ↗
to bottom right 135deg  ↘
to bottom left  225deg  ↙
to top left     315deg  ↖

--- 角度指定 ---
0deg    上向き↑
45deg   右上↗
90deg   右向き→
135deg  右下↘
180deg  下向き↓
225deg  左下↙
270deg  左向き←
315deg  左上↖
360deg  上向き(=0deg)

--- 使用例 ---
background: linear-gradient(to right, #f00, #00f);
background: linear-gradient(135deg, #f00, #00f);
background: radial-gradient(circle, #f00, #00f);
background: conic-gradient(#f00, #0f0, #00f, #f00);

FAQ

よくある質問

はい。グラデーション方向ガイドはレスポンシブ対応しており、iPhone・Android・タブレット・PCなど、モダンなブラウザを搭載した端末であればどこからでも利用できます。

こちらもおすすめ

グラデーション色生成

2色の間のグラデーション中間色を指定ステップ数で生成する無料オンラインツール。

ランダムグラデーション

ランダムな美しいグラデーションのCSSコードを生成する無料オンラインツール。

アクセシブルカラー生成

WCAG 2.1のコントラスト比基準（AA/AAA）を満たす色の組み合わせを自動生成。アクセシビリティ対応のWebデザインに。無料オンラインカラーツール。

ANSIカラー一覧

ANSI 16色のコード一覧を表示する無料オンラインツール。ANSIカラー一覧をブラウザ上で即座に実行でき、カラーツールとして登録不要で利用できます。

ブランドカラー一覧

主要ブランドのブランドカラーを一覧表示する無料オンラインツール。

CMYK→HEX変換

CMYKカラー値をHEXに変換する無料オンラインツール。

読み込み中...