色と角度を指定すると、グラデーションのCSSコードを生成してくれるジェネレーター「ColorSpace Gradient Color CSS Generator」

SEROの嫁です。
夫とニコ生で喋ったり、ブログに投稿したりしています。
2級ウェブデザイン技能士。

この記事は2017年10月16日に書かれたものです。
現在は内容が古い可能性もありますのでご注意ください。

ColorSpace Gradient Color CSS Generator」は、2つの色を角度を指定すると、綺麗なグラデーションを生成してくれるジェネレーター。

CSSコードも自動で書き出してくれるので、背景色の指定などにとっても便利なんです。

使い方

まず、ColorSpace Gradient Color CSS Generatorのサイトにアクセス。

ColorSpace Gradient Color CSS Generator

Choose orientation」で、グラデーションの方向を指定します。

Choose orientation

次に「Enter colors」で、好きな色を2色、指定します。
ボタンをクリックするとカラーピッカーが出てくるのでそこから選ぶか、またはカラーコードでの指定もできます。

Enter colors

そして、「GENERATE」をクリックすると…

GENERATE

画面の背景色が指定したグラデーションになり、「CSS Code」にコードが出力されます。

CSS Code

コードには中間の色も自動的に追加されているのが嬉しいですね。

コード

ちなみにこのColorSpaceではカラーパレットを生成してくれるツールもあるんです。
サイト右上の「PALETTES」をクリックすると、同じようにカラーコードを指定するボタンがあります。

PALETTES

好きな色を入力して「GENERATE」をクリックすれば、さまざまなパターンのパレットがずらりと表示されます。
その数20以上!

GENERATE

これだけあれば、ピンとくる組み合わせが見つかりそうですね。