本文へスキップ
Boltpic
日本語

CSS グラデーション生成

線形・放射状グラデーションを視覚的にデザインし、そのまま使える CSS をコピーできます。

種類

バーをクリックでストップを追加、ハンドルをドラッグで移動、ハンドルをクリックで削除します。

CSS
background: linear-gradient(90deg, #0066cc 0%, #2997ff 100%);

思いどおりの雰囲気のグラデーションを自作

色、角度、ストップの位置を調整しながら、グラデーションをリアルタイムにプレビューできます。背景、カード、ボタン、バナーに合う色の流れをその場で確認しながら、好みのスタイルをすばやく作れます。

思いどおりの雰囲気のグラデーションを自作

完成した CSS コードをそのままコピー

作成したグラデーションは CSS の background コードとして自動生成されます。コピーボタンを押すと、現在の設定を含むコードをクリップボードに保存して、プロジェクトにそのまま貼り付けられます。

完成した CSS コードをそのままコピー

おすすめグラデーション

よく使われる色の組み合わせをプリセットとして用意しました。 気に入ったグラデーションを選んでエディタですぐに編集したり、CSS コードをコピーしてプロジェクトで使えます。 背景、ボタン、カード、バナー、ポスターのスタイルに合わせて色と角度を調整し、自分だけのグラデーションに仕上げましょう。

background: linear-gradient(90deg, #0066cc 0%, #2997ff 100%);
background: linear-gradient(60deg, #ff5e62 0%, #ff9966 100%);
background: linear-gradient(120deg, #2193b0 0%, #6dd5ed 100%);
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
background: linear-gradient(45deg, #ee9ca7 0%, #ffdde1 100%);
background: linear-gradient(110deg, #00c6ff 0%, #7d5fff 50%, #ff5edf 100%);
background: radial-gradient(ellipse, #ffd86f 0%, #fc6262 100%);

よくある質問

どのグラデーションの種類に対応していますか？

線形グラデーションと放射状グラデーションに対応しています。 線形グラデーションは、色が一方向に自然につながる方式です。角度を調整して、左から右、上から下、斜め方向など、好きな流れを作れます。 放射状グラデーションは、中心から外側へ色が広がる方式です。光がにじむ背景、強調エリア、やわらかなポイント効果を作るときに便利です。 活用例) 線形グラデーション：ボタン、バナー、カードの背景 放射状グラデーション：ヒーロー背景、ポイント効果、照明のような演出

CSS コードをコピーできますか？

はい、作成したグラデーションは CSS の background コードとしてそのままコピーできます。 たとえば線形グラデーションを作ると、次のような形のコードが生成されます。

background: linear-gradient(90deg, #0066cc 0%, #2997ff 100%);

コピーしたコードは、CSS ファイル、React/Vue コンポーネントのスタイル、HTML のインラインスタイル、Tailwind のカスタムスタイルなどで活用できます。

カラーストップの数に制限はありますか？

カラーストップとは、グラデーションの中で色が始まったり変わったりする位置のことです。 通常は 2 つの色だけでも基本的なグラデーションを作れますが、カラーストップを増やすと、複雑で豊かな色の流れを作れます。 たとえば、青から紫へつながる単純な背景は 2 つのストップで十分ですが、虹色や複合的な背景のように複数の色が連なるデザインでは、3 つ以上のストップを使うとよいでしょう。 ただし、カラーストップが多すぎると色の流れが複雑になりやすいため、一般的な UI デザインでは 2〜4 個ほどをおすすめします。

モバイルでも使えますか？

はい、モバイルブラウザでも使えます。 スマートフォンやタブレットでも、色や角度を調整してグラデーションを作り、CSS コードをコピーできます。 ただし、ストップの位置を細かく調整したい場合は、PC 環境で作業するほうが便利なことがあります。

おすすめグラデーションは編集できますか？

はい。おすすめグラデーションはそのままコピーして使うこともできますし、エディタで開いて色や角度を編集することもできます。 最初から色を選ぶのが難しい場合は、おすすめプリセットをまず選び、ブランドカラーやプロジェクトの雰囲気に合わせて少しずつ調整する使い方がおすすめです。

グラデーションはブラウザできれいに表示されますか？

ほとんどの最新ブラウザは CSS の linear-gradient() と radial-gradient() に対応しています。 Chrome、Edge、Safari、Firefox などの主要ブラウザでは、通常は問題なく利用できます。 ただし、古いブラウザや特殊な環境では一部の表現が異なって見えることがあるため、実際のサービスに適用する前に主要ブラウザで一度確認することをおすすめします。