水飴色のグラデーションの作り方

サイト全体で使っている水色のグラデーションは linear-gradient(135deg, #c2eeff, #7ed4f5 60%, #aee9ff) というシンプルな指定です。中間色の位置を少しずらすだけで、単調にならずに奥行きのある水色になります。

2色より3色、等間隔より偏らせる

2色のグラデーションはどうしても「のっぺり」しがちです。かといって色数を増やすと虹っぽくなって透明感が消える。落としどころが「同系色3つ、真ん中を偏らせる」でした。60% の位置に一番濃い #7ed4f5 を置くことで、光が当たっている面とそうでない面ができて、平面なのに少し立体に見えます。

3色とも色相はほぼ同じで、明度と彩度だけ変えているのがポイントです。色相まで動かすと途端に人工的な印象になります。水飴の「同じ色なのに厚みで濃淡が出る」感じを再現するには、明度差だけで組むのが近道でした。

角度は 135deg 固定

グラデーションの角度はサイト全体で 135deg(左上から右下)に統一しています。光源が常に左上にあるという暗黙のルールができるので、水玉が何個並んでも、カードのサムネイルになっても、同じ世界の物体に見えます。逆にここがバラバラだと、同じ色でも妙にちぐはぐな印象になるので、角度の統一は色以上に効くかもしれません。

どこで使い回しているか

このグラデーションは、背景の大きな水玉、ブログ詳細ページの雫、カーソルに付いてくる水滴、artifacts ページの飛沫まで、サイト内のあらゆる「水」に使われています。CSS 変数にはあえてせず、コピペで使い回しています。値を1か所にまとめるより「この3色と 135deg が mizuame の水」と覚えてしまうほうが、新しいパーツを作るときに迷わないからです。このあたりは好みだと思います。