使い方
- プリセットか、初期状態のグラデーションから始めます。
- バーをクリックして色を追加し、ストップをドラッグして位置を動かします。
- 線形・放射状・円錐から種類を選び、角度や中心を調整します。
- CSS の宣言、または Tailwind のクラスをコピーします。
オプションの説明
- 線形
- 色が直線に沿って変化します。0° は上向き、90° は右向き、180° は下向きです。
- 放射状
- 色が中心点から、要素に合わせた円または楕円状に広がります。
- 円錐
- 色相環や円グラフのように、色が中心点の周りを回るように変化します。
- 繰り返し
- パターンを繰り返します。0% から 10% のように狭い範囲にストップを置くと、ストライプを作れます。
生成されるコードの例
同じ 2 色を、種類ごとに書き出した例です。ストップは常にパーセントの位置で書かれます。
linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)Tailwind 版は、同じ値を任意の値 (arbitrary value) のクラスで包みます。空白はアンダースコアになり、カンマの後ろの空白は取り除かれます。
bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]最後の CSS では、要素の 10% ごとにパターンが繰り返され、細いストライプになります。円錐グラデーションでは角度が回り始める位置を表し、放射状グラデーションでは 2 つのパーセントが中心の位置を表します。
よくある質問
どのブラウザで使えますか？
線形・放射状・円錐グラデーションは、Chrome、Edge、Firefox、Safari の現行バージョンすべてで、ベンダープレフィックスなしで動作します。
透明なグラデーションを作るには？
ストップの色の欄に、アルファチャンネル付きの色を入力します。たとえば #00000000 は完全に透明な黒です。
Tailwind のクラスはどう使いますか？
Tailwind CSS 3 または 4 で、要素の class に追加してください。任意の値（arbitrary value）を使っているので、設定は不要です。
プライバシー
このツールはすべてブラウザ内で動作します。ファイルやテキストはお使いの端末上で処理され、当サイトのサーバーにアップロードされることはありません。