logo header
logo header
logo header
logo header
  • 2016.07.20
  • 技術ブログ

CSS3でグラデーションを作る時に役立つジェネレーター系配色サービス6選

gradation

最近、きれいな写真の上に薄くグラデーションを重ねて表現しているWEBサイトをよく見るようになりました。
グラデーションはうまく使えばビジュアルを印象的に見せることができるので便利です。
今回はそんな美しいグラデーションをCSSで作成するためのジェネレーターや配色選びに使えるサービスを紹介します。

Ultimate CSS Gradient Generator

Ultimate_CSS_Gradient_Generator

Ultimate CSS Gradient Generator はAdobe系ソフトのグラデーションツールを使ったことがある人にはなじみのあるUIで、簡単にグラデーションを作成することができます。
有名なサービスなので使ったことがある人もいるかもしれません。自分もかなりお世話になりました。
import imageを使えば、画像からグラデーションのスタイルも出力してくれるようです。

こんな人にオススメ

  • 表現したいグラデーションのイメージがはっきりしている
  • グラデーションを細かく調整したい

shade

shade

shade はスライダーを動かして直感的に美しいグラデーションを作成することができます。 操作が単純なので微妙な調整がしやすく使いやすいサービスです。

こんな人にオススメ

  • 触りながらグラデーションを調整したい
  • なんとなくいい感じのグラデーションを作りたい

Blend

Blend

Blend は2色を選択して簡単にグラデーションを作成してくれます。
FlatUIやMaterialなど用意されたカラーパレットから選択できるのでお手軽です。

こんな人にオススメ

  • マテリアルデザインやフラットデザインのカラーでグラデーションを作りたい
  • 用意された色を選んでシンプルにグラデーションを作りたい

uiGradients

uiGradients

uiGradients は用意されたグラデーションパターンを選択してCSS出力できるサービスです。自分でカラーを調整することはできません。
キーボードの左右でパターンを切り替えたり、左下のボタンから用意されたパターンを一覧で確認できます。

こんな人にオススメ

  • 既に用意されたきれいなグラデーションを使いたい
  • 他のグラデーションを見て参考にしたい

Unique gradient generator

Unique_gradient_generator

Unique gradient generator は画像をぼかしたような、ちょっと変わったグラデーションを作ることができます。
右上のスライダーを適当に触るだけでも色々変わるので面白いです。
使いたいグラデーションができた時は、base64形式で画像を書き出したCSSを出力できます。

こんな人にオススメ

  • ユニークなグラデーションを作りたい
  • 写真からグラデーションを作ってみたい

CSS GRADIENT ANIMATOR

CSS_Gradient_Animator

CSS GRADIENT ANIMATOR は背景などで使えるグラデーションが変化するアニメーションを簡単に作ることができます。
まずは「ADD colour」ボタンを押して色を選択してみましょう。プレビューで実際のアニメーションを確認できます。

こんな人にオススメ

  • グラデーションを使ったアニメーションを作りたい

rgb.to(おまけ)

rgb_to

rgb.to
6選には入らないのですが、カラーコードからRGBやCMYKに変換してくれるサイトです。
ブックマークとしておくと何かの際に便利だったりします。

まとめ

ざっと、CSS3でグラデーションを作る時に役立つサービスを紹介してみました。
探してみるといろいろと便利なサービスがあることが分かります。
上記で紹介したサービスを使えばとても簡単にグラデーションが作成できるので、いろいろといじって自分なりのグラデーションを作ってみてはいかがでしょうか。

ともに世界をアップグレードできる、そんな日を夢見て。
Upgrade the World!