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/



\ Webデザインに関するお役立ち情報を定期的に配信中 /

Follow @webclips_jp

PopularPosts
  • 漢字が使える日本語フリーフォント97選(商用利用可)
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 無料で使えるデジタル風フォント13選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • ビジネス系イラストをダウンロードできるフリー素材サイト7選
WordPress対応! 初心者におすすめのレンタルサーバー特集
RecentPosts
  • 【2024年10月版】WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け )
  • Adobeのセール時期はいつ頃? Adobeセールの最新情報
  • 【2024年度】Adobe CC(Creative Cloud)を安く買う方法
  • Photoshopで使用できる“水しぶき系”ブラシ8選
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • アイソメトリックイラストをダウンロードできるフリー素材サイト6選