🏖️
CSS＋テスクチャ画像で砂浜を描く
完成版
解説
グラデーション＋テクスチャ画像を利用するだけです。
砂浜と海のグラデーションは以下で表現できます。
background: linear-gradient(#dcd3b2AA, 90%, #00d0e8AA);
上から下へ向けた線形のグラデーション、90%のところに中間点がくるようにしています。
このグラデーションに透過PNGのテクスチャ画像を中央からリピートして重ね、砂の粒度感を演出します。
background: url(path/to/noise.png) center/4%, linear-gradient(#dcd3b2AA, 90%, #00d0e8AA);
backgroundプロパティでは、複数のレイヤーをカンマ区切りで表現できます。
今回は「背景のグラデーションレイヤー」の上に「透過PNGテスクチャ画像レイヤー」を重ねていることになります。
（※background-colorが指定できるのは最後のレイヤーのみです。）
ちなみにこのテクスチャ画像は、GIMPやPhotoshopなどで作成することができます。
GIMPであれば、100×100pxくらいの小さな無地画像へフィルタ「セルノイズ」を適用し
不透明度を20%にして透過付きで書き出してあげるだけです。
（Photoshopではフィルタ「ノイズを加える」で同様のことができます）
このとき、画像に色はつけずグレースケール画像としておきます。
また、リピートする画像になるので、
「上下の辺と左右の辺がスムーズに繋がるか」を意識すると良いです。
背景色やテクスチャを変えれば様々な質感の表現に応用できそうです。
テキストを追加してあげると、砂浜に書いた文字の演出ができます。
参考サイト
Discussion