Zenn
✨

CSSでAppleっぽいグラデーションの背景を作ろうとする

2020/12/08に公開
CSS
tech

https://zenn.dev/catnose99/scraps/a1ec13e8a2d17350fbfe

前回はAppleっぽいグラデーションのテキストを作った。今回は背景もAppleっぽくできないか試行錯誤してみる。

単純にlinear-gradientとradial-gradientを組み合わせてやってみる

Appleのグラデーションは色の切り替わりが激しく、切り替わり方も不規則。1直線のグラデーションであのような表現をすることはできない。そこで直線のグラデーション（linear-gradient）と円形のグラデーション（radial-gradient）を複数個重ねることにした。

CSS
/* グラデーション部分以外は省略。気になる方はCodePenのソースを見ていただければ */
.container {
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
		    radial-gradient(ellipse at 80% 5%, #4c00ff 0%, rgb(255 40 184 / 0%) 30%),
		    radial-gradient(ellipse at bottom left, #ff006a 0%, rgb(98 190 255 / 31%) 60%),
		    linear-gradient(135deg, rgba(18, 46, 119, 0) 0%, rgba(18, 46, 119, 0) 75%, #395eff 100%),
		    linear-gradient(82deg, #dff7ff 0%, #74b5ff 27%, #88b8ff 74%, #82b3ff 100%);
}

グラデーションが重なる部分が目立ってしまっており、やや不自然に見える。

background-blend-modeを合わせて使う

CSSにはbackground-blend-modeプロパティがあり、これを使うと背景画像（ここではグラデーション）が重なる部分の見え方（混合の仕方）を変えることができる。このサンプルを見るとグラデーションの重なりがより自然に見えることが分かると思う。

CSS
/* テキストや幅・高さの指定は省略。気になる方はCodePenのソースを見ていただければ */
.container {
	background-blend-mode: hue, color, overlay, screen;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
		    radial-gradient(ellipse at 80% 5%, #4c00ff 0%, rgb(255 40 184 / 0%) 30%),
		    radial-gradient(ellipse at bottom left, #ff006a 0%, rgb(98 190 255 / 31%) 60%),
		    linear-gradient(135deg, rgba(18, 46, 119, 0) 0%, rgba(18, 46, 119, 0) 75%, #395eff 100%),
		    linear-gradient(82deg, #dff7ff 0%, #74b5ff 27%, #88b8ff 74%, #82b3ff 100%);
}

background-blend-modeにはカンマ区切りで複数の値を指定できる。ここで指定した値についてはCSSリファレンスから説明を拝借する。

  • screen→ 光をかけ合わせたような結果
  • hue→下レイヤー色の輝度と彩度、および、上レイヤー色の色相を組み合わせた結果
  • color→ 下レイヤー色の輝度と彩度、および、上レイヤー色の色相を組み合わせた結果
  • overlay→下レイヤー色に応じて、乗算、または、スクリーンで合成

ちなみにbackground-blend-modeはIEには対応していないが、それ以外のモダンブラウザでは問題なく使える。

https://caniuse.com/css-backgroundblendmode

さらにノイズをかけてみる

調子にのってきたのでさらにグラデーションの上にノイズをかけてみる。CSS TricksにNoise Data URI Imageが置かれていたので拝借する。

（微妙な仕上がり。これならノイズ無しの方が良いかもしれない）

.container {
  position: relative;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse at 80% 5%, #4c00ff 0%, rgb(255 40 184 / 0%) 30%), radial-gradient(ellipse at bottom left, #ff0076 0%, rgb(15 156 255 / 31%) 60%), linear-gradient(135deg, rgba(18, 46, 119, 0) 0%, rgba(18, 46, 119, 0) 75%, #395eff 100%), linear-gradient(82deg, #00c4ff 0%, #74b5ff 27%, #88b8ff 74%, #3b88ff 100%);
  background-blend-mode: screen, hue, color, overlay;
}
.container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(ノイズ画像のURL);
  background-size: 30px; /* ノイズ画像の粗さを調節 */
  background-repeat: repeat;
  filter: brightness(200%); /* ノイズ画像が少し暗かったのでCSS filterで明るくする */
}

ノイズの明るさや粗さを調整したかったので、疑似要素を使ってグラデーションの上にぴったりと重ねる形でノイズ画像を配置した。

というわけでAppleほど格好良くはならなかったが一応それっぽいものができた。「グラデーションの画像を用意しろよ」と言われたら、本当にその通りですと答えるしかないです。はい。

Discussion