グラデーション作成

色を選んで、きれいなグラデーションを作ります。CSSコードをコピーしてWebサイトに使ったり、PNGの壁紙として保存したりできます。

ランダム

CSSコード


    

      
      
      
    

  


  
おすすめの組み合わせ


  

    
使い方

    
バーをクリックすると色が増え、つまみをドラッグすると位置を動かせます。下の一覧で色や位置（%）を細かく調整できます。気に入ったら「CSSをコピー」して、background に貼り付けてください。

    
グラデーションはどのブラウザで表示できる？

    
linear-gradient・radial-gradient・conic-gradientは、Chrome・Edge・Safari・Firefoxなど現在の主要なブラウザすべてで使えます。

    
壁紙として保存するには？

    
サイズ（PC壁紙・スマホ壁紙・Xヘッダー・正方形）を選んで「PNGで保存」を押すと、その大きさの画像としてダウンロードできます。