無料のCSSグラデーションジェネレーター

background: linear-gradient(90deg, #ff6b6b 0%, #feca57 100%) のように、グラデーション関数を背景に指定します。このツールでは、タイプ、角度、ストップを選ぶだけでその行が生成されるので、コピーしてスタイルシートに貼り付けてください。

90deg が左から右です。0deg は下から上、180deg は上から下、270deg は右から左になります。ここでの初期値は 135deg で、左上から右下に向かいます。負の値を含め、任意の数値を入力できます。

ストップのテキスト欄に透明な色を入力します。たとえば、透明な白へのフェードなら rgba(255,255,255,0)、透明な黒なら rgba(0,0,0,0) です。コードには入力したとおりに反映されます。カラーピッカーは透明を表示できず、代わりに黒で表示されます。

線形は、角度をつけた直線に沿って色を混ぜ合わせます。放射状は、中心点から外側に向かって色を広げます。円錐は、時計の針のように中心の周りを回りながら色を巡らせるため、円グラフやカラーホイールに向いています。このツールでは、放射状グラデーションは中心にある円形として描画されます。

現時点ではツール上で変更できません。放射状の出力は常に中心からの radial-gradient(circle, ...) になります。コピーした後でコードを編集してください。circle を ellipse に変えたり、circle at 30% 20% と書いて中心を移動したりできます。ストップはそのまま使えます。

いいえ、不要です。現在のブラウザはすべて、線形グラデーションと放射状グラデーションをプレフィックスなしでサポートしています。円錐グラデーションは Chrome 69、Safari 12.1、Firefox 83 以降で使えます。このツールはプレフィックスを一切追加しないため、コピーされる行は標準の構文のみです。

2つのストップを同じ位置に置きます。たとえば、#000000 を50%、#ffffff も50%に置くと、色が混ざらずにくっきりした境界線になります。ペアを増やせばストライプを作れます。コードではストップが位置順に並べ替えられ、同じ位置のストップは追加した順序のまま保たれます。

上限はありません。「ストップを追加」を押すと、最初のストップと最後に追加したストップの中間に新しいストップが置かれるので、好きな位置までドラッグして調整してください。ストップは2つになるまで削除できます。

このツールが出力するのは標準のCSSで、Tailwind のクラスではありません。スペースをアンダースコアに置き換えて、bg-[linear-gradient(135deg,#6366f1_0%,#8b5cf6_100%)] のように任意値として貼り付けるか、テーマに背景画像として追加してください。

このツールが作るのは背景用のグラデーションですが、コードはテキストにも再利用できます。コピーした background の行をテキスト要素に指定し、さらに background-clip: text、-webkit-background-clip: text、color: transparent を追加すると、文字の形にグラデーションが透けて表示されます。

はい。アカウント登録や利用回数の制限なしで無料で使えます。色や設定はブラウザ内にとどまり、保存されないため、再読み込みすると最初からになります。公開サイトでは、Google Analytics が CSSをコピー のクリック数を計測しますが、グラデーションの内容は計測しません。