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

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

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




基本的なCSSグラデーションの作り方




1

線形グラデーション

線形グラデーションを掛けたい要素の背景(background)にlinear-gradientを記述し方向・開始色・終了色を指定します。グラデーションの向きはデフォルト(指定なし)で上(開始色)から下(終了色)となっています。あとはto right(左から右)to top(下から上)といった具合に方向を指定します。

.gradient01 {
background: linear-gradient ( 方向, 開始色, 終了色 );
}
グラデーション
html
<div class="gradient01" >グラデーション</div>
CSS
.gradient01{
	display:block;
	width: 250px;
	height:250px;
    background: linear-gradient(to right, red, orange);
}




2

円形グラデーション

円形(放射状)グラデーションを掛けたい要素の背景(background)にradial-gradientを記述し開始色・終了色を指定します。 開始位置やグラデーションの変化割合など、詳細な記述方法もありますが、基本的に開始色・終了色を指定するだけで円形グラデーションを表現することができます。

.gradient02 {
background: radial-gradient ( 開始色, 終了色 );
}
グラデーション
html
<div class="gradient02" >グラデーション</div>

CSS
.gradient02{
	display:block;
	width: 250px;
	height:250px;
    background: radial-gradient(red, orange);
}


ここまでは基本的なグラデーションの作り方でしたが、もうちょっと凝ったグラデーションを作りたい場合は、グラデーションジェネレーターなどWebサービスを利用した方が効率がよいと思います。次にCSSグラデーション作成時に役に立つジェネレーター・Webサービスを紹介します。



CSSグラデーション作成時に役立つサービス



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サービス。カード下部のスライダーでカラー変更や割合の調整が可能。コードのコピーはもちろん、Adobe XDとSketchのファイルをダウンロードすることができます。

8

Fresh Background Gradients

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

9

Grabient

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

10

CSS Gradient Animator

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

11

Granim.js

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


  • マルチボックスのフルスクリーンメニュー「Multibox Menu」
  • 複数のレイヤーを活かしたきれいなエフェクト「Multi-Layer Page Reveal Effects」
  • 【無料・低価格】ロゴ作成に役立つロゴジェネレーター12選
  • iOS・Androidアイコンを作成できるジェネレーター「App Iconizer」
  • CSSでインスタグラムのようなフィルターを再現できる「Instagram.css」
RELATED POSTS
  • CSSで実装するローディングアニメーション「Single Element CSS Spinners」
  • 30秒以内に理解できるCSSスニペットのコレクション「30 Seconds of CSS」
  • CSSとJavaScriptで実装できるメニューをまとめた「110 CSS Menu」
  • 音楽に合わせて要素を動かすことができる「Rythm.js」
  • バーガーメニューなどアニメーションで切り替わるボタンを生成できる「Transformicons」
  • メニューのホバーエフェクト集「Inspiration for Menu Hover Effects」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ
RECENT POSTS
  • Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」
  • マルチカラーグラデーションのコードをコピーできる「gradienta」
  • SNSで使用する画像・動画サイズのテンプレート集「SocialSizes」
  • やわらかいタッチのイラストをダウンロードできる「Open Doodles」
  • 簡単にホバーエフェクトを実装できるCSSライブラリ「Izmir Hover Effects」