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とJavaScriptで実装できるメニューをまとめた「110 CSS Menu」
  • サイトで使用していないCSSセレクタを調べられる「Unused CSS」
  • UIデザインのスニペットがまとめられたサイト「CodeMyUI」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • 【CSS】text-shadowの使用例をまとめたサイト「Trendy CSS Text Shadows」
RELATED POSTS
  • ブロック要素をドラッグできるグリッドレイアウト「Muuri」
  • 様々なエフェクトを実装できるパーティクルエンジン「Proton」
  • イメージを見ながら学べるCSS GRIDのチートシート「GRID」
  • 【jQuery】背景画像のスライドショーを実装する「Vegas2」
  • カスタマイズして使用できるアイコンライブラリ「Vivid.js」
  • ギザギザボーダーを作れるジェネレーター「CSS Jagged Border Generator」
RECENT POSTS
  • バナーデザイン制作で参考になるバナー広告ギャラリーサイト12選
  • 【2021年版】 WordPressのおすすめテーマ17選(無料版/有料版)
  • 【2021年版】 無料で使えるフリー画像・写真素材サイト27選(国内/海外)
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
POPULAR POSTS
  • 【2021年版】 無料で使えるフリーイラスト素材サイト33選(商用利用可)
  • 【無料】漢字が使える日本語フリーフォント70選
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
  • フォントを調べる時に役に立つツール・サイト10選
  • 無料で使える日本語・英語のかわいいフリーフォント20選