たった数行のCSSのみ!グラデーションオーバレイで背景画像に重ねる方法

CSSでグラデーションオーバーレイを設定






CSSだけで簡単に実装可能なグラデーション背景画像の作り方を紹介します。

数年前から背景画像にグラデーションを重ねているトップページや、背景全体にグラデーションを使用しているWEBサイトが増えました。その影響もあって自分もグラデーション背景画像を使う機会が多くなったのですが、使ってみると数行のCSSだけで実装できるぐらい簡単でした。

グラデーションの基本

CSSグラデーションの基本

グラデーション背景を作るには、background プロパティーに linear-gradient を使ってグラデーションの色を指定します。グラデーションの開始色と終了色をコロンで区切って記述するだけなので、単純なグラデーションならたった1行のコードで作れます。

CSSで作ったグラデーションは色も角度も簡単に変更出来るので、修正作業の事を考えると Photoshopでグラデーション画像を作って貼り付けるよりも、かなり使い勝手が良いと思います。

CSSでグラデーション背景を作る

それではグラデーション背景を作ってみます。

See the Pen LINEAR-GRADIENT by Beginners-High (@dragonpa) on CodePen.dark

グラデーションの角度を変更する

グラデーションの角度を変えたい場合は、deg を使います。

See the Pen LINEAR-GRADIENT-deg by Beginners-High (@dragonpa) on CodePen.dark

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

最後に背景画像を指定し、グラデーションに透過処理をして重ねます。
PhotoShopでグラデーション処理をした画像を背景に設定してもいいですが、グラデーションの色や角度を変更する場合を考えると、CSSでグラデーションオーバーレイを設定した方が便利です。

linear-gradient で透過を使う場合は、rgba でグラデーションカラーを指定します。

See the Pen LINEAR-GRADIENT-bg by Beginners-High (@dragonpa) on CodePen.dark

linear-gradient の後ろにコロンを入れて、画像のファイルパスを記述すれば、グラデーションの下に背景画像が表示されます。グラデーションカラーに透過を指定しないと背景画像が見えないので、グラデーションカラーは rgba で指定しておきます。

同時に background-size を指定しておけば、背景画像を画面全体に表示させることができます。

たった3行で実装できるグラデーション背景画像ですが、そもそもグラデーション自体作るのめんどいわぁ…という方は、初心者でも安心!CSSグラデ-ションが簡単に作れる無料ツールという記事でグラデーション作成ジェネレーターの紹介をしているので、ご覧になってください。

まとめ

以前は、PhotoShopでグラデーションオーバレイの処理をした画像を背景に設定していましたが、CSSを使えば背景画像の差し替えも、グラデーションカラーの変更も簡単にできるので、作業もファイル管理もめちゃくちゃ楽になりました。

背景画像にグラデーションを重ねてみたい!と思っている方は是非一度試してください。

「たった数行のCSSのみ!グラデーションオーバレイで背景画像に重ねる方法」でした。

created by Rinker
¥3,386 (2020/09/21 23:25:28時点 Amazon調べ-詳細)






CSSでグラデーションオーバーレイを設定