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

 
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);
    }
    


3

背景画像にグラデーションを重ねる

背景画像にグラデーションを重ねたい場合は背景(background)linear-gradientのカラーをRGBAカラーで指定します。RGBAはRed・Green・BlueにAlpha(透明度)を加わえたカラーのことです。透明度を指定することで背景画像にグラデーションを重ねる効果を実装することができます。

グラデーション
html
        <div class="gradient03" >グラデーション</div>
        
        
CSS
        .gradient03{
            display:block;
            width: 250px;
            height:250px;
            background: linear-gradient(to top, rgba(0, 150, 150, 0.5) 0%, rgba(255, 150, 0, 0.5) 100%),url(img.jpg);
        }
        


4

グラデーションのアニメーション

アイデア次第ではCSSでグラデーションをアニメーションさせることもできます。背景(background)にグラデーションを指定し、バックグラウンドサイズをオーバーサイズ(今回は500%)にします。オーバーサイズのグラデーションをキーフレームアニメーションでポジションを移動させるとグラデーションが変化するアニメーションになります。

グラデーション
html
    <div class="gradient04" >グラデーション</div>
    
    
CSS
    display:block;
        width: 250px;
        height:250px;
        background: linear-gradient(90deg, red, orange, blue, green);
        background-size: 500% 500%;
        animation: gradation 10s infinite;
    }
        @keyframes gradation {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%}
    }
    

ここまでは基本的なグラデーションの作り方でしたが、もうちょっと凝ったグラデーションを作りたい場合は、グラデーションジェネレーターなど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

Multicolor Gradients

マルチカラーグラデーションのコードをコピー、またはJPGで保存できるWebサービス。レイヤー・ブレンドモードなどで描画された複雑なグラデーションをアーカイブ化しています。

グラデーションは中間色・間隔など、思い通りにならない場合もあるので、直観的にグラデーションを操作できるジェネレーターは非常に便利です。気に入ったサービスがあったらブックマークしておきましょう。以上、CSSグラデーションの作成に役立つジェネレーター・Webサービスの紹介でした。

配色に悩んだときに役立つカラーパレットまとめ

design.webclips.jp/color-palette/




  • 簡単にホバーエフェクトを実装できるCSSライブラリ「Izmir Hover Effects」
  • CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」
  • CSSでインスタグラムのようなフィルターを再現できる「Instagram.css」
  • ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
  • 【CSS】フォントサイズの単位を相対比較できる「PXtoEM.com」
RELATED POSTS
  • 複数のレイヤーを活かしたきれいなエフェクト「Multi-Layer Page Reveal Effects」
  • 音楽に合わせて要素を動かすことができる「Rythm.js」
  • Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」
  • Web制作に役立つChromeおすすめの拡張機能11選
  • UIデザインのスニペットがまとめられたサイト「CodeMyUI」
  • CSSで出力する三角形ジェネレーター「CSS Triangle Generator」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • WordPressのおすすめテーマ19選【無料版・有料版】
  • 【2020年版】WordPressおすすめレンタルサーバー6選 -初心者向け-
  • 導入しておきたいWordPressのおすすめプラグイン
  • Photoshopで画像を切り抜くテクニック【初心者向け】