CSSだけで簡単に実装可能なグラデーション背景画像の作り方を紹介します。
数年前から背景画像にグラデーションを重ねているトップページや、背景全体にグラデーションを使用しているWEBサイトが増えました。その影響もあって自分もグラデーション背景画像を使う機会が多くなったのですが、使ってみると数行のCSSだけで実装できるぐらい簡単でした。
グラデーションの基本
グラデーション背景を作るには、background プロパティーに linear-gradient を使ってグラデーションの色を指定します。グラデーションの開始色と終了色をコロンで区切って記述するだけなので、単純なグラデーションならたった１行のコードで作れます。
CSSで作ったグラデーションは色も角度も簡単に変更出来るので、修正作業の事を考えると Photoshopでグラデーション画像を作って貼り付けるよりも、かなり使い勝手が良いと思います。
CSSでグラデーション背景を作る
それではグラデーション背景を作ってみます。
1 2 3 | body { background: linear-gradient( #3ac9fe, #014f78 ); } |
See the Pen LINEAR-GRADIENT by Beginners-High (@dragonpa) on CodePen.dark
グラデーションの角度を変更する
グラデーションの角度を変えたい場合は、deg を使います。
1 2 3 | body { background: linear-gradient( 135deg, #AED581, #33691E ); } |
See the Pen LINEAR-GRADIENT-deg by Beginners-High (@dragonpa) on CodePen.dark
グラデーションを背景画像に重ねる
最後に背景画像を指定し、グラデーションに透過処理をして重ねます。
PhotoShopでグラデーション処理をした画像を背景に設定してもいいですが、グラデーションの色や角度を変更する場合を考えると、CSSでグラデーションオーバーレイを設定した方が便利です。
linear-gradient で透過を使う場合は、rgba でグラデーションカラーを指定します。
1 2 3 4 5 | body { background: linear-gradient( 135deg, rgba(246, 255, 0, 0.8), rgba(255, 0, 161, 0.8)), url(images/bg-cherrybrossam.jpg); background-size: cover; } |
See the Pen LINEAR-GRADIENT-bg by Beginners-High (@dragonpa) on CodePen.dark
linear-gradient の後ろにコロンを入れて、画像のファイルパスを記述すれば、グラデーションの下に背景画像が表示されます。グラデーションカラーに透過を指定しないと背景画像が見えないので、グラデーションカラーは rgba で指定しておきます。
同時に background-size を指定しておけば、背景画像を画面全体に表示させることができます。
たった３行で実装できるグラデーション背景画像ですが、そもそもグラデーション自体作るのめんどいわぁ…という方は、初心者でも安心！CSSグラデ－ションが簡単に作れる無料ツールという記事でグラデーション作成ジェネレーターの紹介をしているので、ご覧になってください。
まとめ
以前は、PhotoShopでグラデーションオーバレイの処理をした画像を背景に設定していましたが、CSSを使えば背景画像の差し替えも、グラデーションカラーの変更も簡単にできるので、作業もファイル管理もめちゃくちゃ楽になりました。
背景画像にグラデーションを重ねてみたい！と思っている方は是非一度試してください。
「たった数行のCSSのみ！グラデーションオーバレイで背景画像に重ねる方法」でした。
