テクスチャーのあるグラデーション

  • プロダクション
テクスチャーのあるグラデーション

目次

「ベタ塗りのグラデーション背景はのっぺりした印象なので、塗りに質感（テクスチャ）を加えたい」。という要望がデザイナーからありました。考えてみる価値のあるテーマです。

CSSだけでは難しい。さりとて…

CSSグラデーションで表現できるのはベタ塗りだけです。ざらざらしたテクスチャといった質感をCSSだけで表現することはできません。

下のサンプルは、左が目指している結果（ノイズを誇張して画像作成しています）、右が一般的な linear-gradient() で作成した2色グラデーションです。風合いがまるで異なりますね。

.ex1 {
    background-image: linear-gradient(135deg, #f0f, #0ff);
}

CSSでできないのならば画像で、とまずは考えますが、テクスチャのあるグラデーション画像には、拡大縮小して使いにくい（質感が変わってしまう）、圧縮画像フォーマットと相性が悪い（ファイルサイズや画質が犠牲になる）といった難点があります。これらの難点をクリアし、場所を選ばずに使えてデータも軽量になる妙案はないものでしょうか。

単色タイリング＋linear-gradient()（部分解決）

単色のテクスチャ付き画像（グラデーションの第１色）をタイリングし、その上にCSSグラデーション（透明から第２色へ）をオーバーレイする方法。タイリングする画像はリピートパターンがわからない程度の大きさがあれば十分で、かなり小さく作れます。

.ex2 {
    background-image: linear-gradient(135deg, transparent, #0ff), url(./assets/images/texture1.png);
}

ただしこの方法では、第２色が濃くなるにしたがってテクスチャも覆い隠されていき、終端部ではベタ塗りになってしまいます。完全な解決にはなっていませんね。

タイリング同士のマスク合成

第１色・第２色それぞれに単色のテクスチャ付き画像を用意し、グラデーションマスクで合成する方法。

この方法は第２色に要素をひとつ消費するというのが欠点です。before after 擬似要素がいつでも使えるとは限りませんし、グラデーション表現のためにHTMLに要素をひとつ増やすというのもあまりスマートではありません。

.ex3 {
    background-image: url(./assets/images/texture1.png);
    &::after {
        display: block;
        content:'';
        height: 100%;
        background-image: url(./assets/images/texture2.png);
        mask-image: linear-gradient(135deg, transparent, #000);
    }
}

ともあれ、仕上がりはほぼ意図通りとなりました。

ところで、今回は時間の関係で触れることができませんでしたが、実はSVGにはノイズを加えるフィルターがすでに用意されています。SVGの多彩な機能には、CSSでは手の届かないところを補ってくれるものがたくさんありそうです。そうした可能性も今後は掘り下げてみたいと考えています。

この記事の執筆者

G・I フロントエンドエンジニア

CXコンサルティング事業部

この記事に関するご相談やご質問など、お気軽にお問い合わせください。

お問い合わせ

関連する記事

すべての記事を見る

タグ一覧