1080works 小さな道具箱事業No.0190 / 1080

CSSグラデーションの作成（コードをコピー）

きれいなグラデーションのCSSが欲しい。色と角度を選ぶと、見本とコピーできるコードを作ります。

配色・デザインの本PR

グラデーションの配色は、デザインの本でたくさんの例を見られます。

詳しく見る

このリンクは広告です。リンク先での購入・申込により運営者に報酬が支払われることがあります。 Amazonのアソシエイトとして、1080worksは適格販売により収入を得ています。

使い方

  1. 2つの色を選ぶ。
  2. 種類（直線か円形）と角度を選ぶ。
  3. 見本とCSSのコードが出る。「コードをコピー」でコピーできる。

よくある質問

角度の向きは？

0degは下から上、90degは左から右、180degは上から下へ色が変わります。

3色以上にしたい

コードの色の部分に「, #00aaff」のように足すと3色以上にできます。

古いブラウザでも使える？

linear-gradient と radial-gradient は、いまの主なブラウザで使えます。

知っておくと便利

色のコードの変換とコントラストは事業No.0034で。

px・remの換算は事業No.0170で。

画像の縦横比は事業No.0169で。

ほかの道具

更新日 2026-11-08。計算はすべてこのページの中で行い、入力した内容をサーバーへ送ることはありません。結果は目安であり、正確性を保証するものではありません。