CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ

CSSでグラデーションのコードを書く際に、方向やカラー(rgba・hsla)の数値など面倒と感じることも多いと思います。シンプルなグラデーションであればPhotoShopで作成しCSSに反映することも簡単ですが、多色(3色以上)や割合の異なる複雑なグラデーションとなるとCSSに記述するのも難しくなります。

調べてみるとジェネレーターや、グラデーションパターンをコレクションしてるWebサービスなど、CSSをコピペするだけで使える便利なサイトがいろいろ見つかりました。今回はグラデーションの作成に役立つWebサービスを厳選して紹介します。

1

Ultimate CSS Gradient Generator

Illustratorのグラデーションパレットと同様にポイントを追加・削除(カラーをドラッグアウト)や割合(比率)の調整も可能。カラーフォーマットの指定もできる多機能なジェネレーター。

2

CSS Gradient

Ultimate CSS Gradient Generatorと同じスタイル。インターフェイスが大きく直感的にグラデーションを作成できる。

3

GradPad

カラーの追加・削除、向きなど全てドラッグで操作できる。グラデーション作成後はヘッダーの「Get CSS for this Gradient」をクリックするとコードが表示されます。

4

shade

ベースカラーを決めてから、色合い・彩度・明度などをスライダーで調整し好みのパターンを見つけ出すツール。画面右下のコードをコピペします。

5

Blend

グラデーションの始点と終点のカラーを指定するだけのシンプルなグラデーションジェネレーター。ブレンド後向きなどを調整しコードをコピペします。

6

uiGradients

グラデーションパターンをコレクションしたWebサービス。気に入ったグラデーションのコード出力やイメージ(jpg)でのダウンロードもできます。

7

Gradients Cards

グラデーションをコレクションしたWebサービス。カード下部のスライダーでカラー変更や割合の調整が可能。CSSのコピーはもちろん、Adobe XDとSketchのファイルをダウンロードすることができます。

8

Fresh Background Gradients

グラデーションをコレクションしたWebサービス。カスタマイズはできませんが、大量のグラデーションからCSSコードのコピーとイメージ(PNG)のダウンロードができます。

9

Grabient

グラデーションをコレクションしたWebサービス。カラーの追加・削除、向きなどカスタマイズも可能です。

10

CSS Gradient Animator

CSSグラデーションのアニメーションを簡単に作れるジェネレーター。カラー指定、方向やスピードを調整し「Preview」で確認しながらアニメーションのグラデーションを作成します。

11

Granim.js

CSSではありませんが、グラデーションをアニメーション化できる軽量のJSライブラリも参考までに。