背景のグラデーションのCSSサンプル集

今回は、前回触れたように Bricks には標準でグラデーション背景の設定がない ため、CSS を使ってグラデーション背景を実装する方法を紹介します。
そのままコンテナの CSS に貼り付けて使えるサンプルをいくつか用意しましたので、必要に応じてカラーコードなどを変更してご活用ください。

グラデーション背景のCSS

%root% {
  background: linear-gradient(90deg, #ffbd2b 0%, #ff6b6b 100%);
}

%root% {
  background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 60%);
}

%root% {
  background: linear-gradient(90deg, #000000 0 50%, #ffffff 50% 100%);
}

%root% {
  background: radial-gradient(circle at center, #ffd166 0%, #ef476f 40%, #073b4c 100%);
}

%root% {
background: conic-gradient(from 180deg at 50% 50%, #06d6a0, #118ab2, #073b4c, #06d6a0);
}

%root% {
  background: repeating-linear-gradient(45deg, #ffffff 0 8px, #f1f1f1 8px 16px);
}

%root% {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15)), url('/path/to/your-image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

url(‘/path/to/your-image.jpg’); このURL部分は変更してご使用ください。

%root% {
  background: linear-gradient(180deg, #000 0 2px, transparent 2px 100%), linear-gradient(180deg, transparent 0 98%, #000 98% 100%);
  background-size: 100% 2px, 100% 2px;
  background-position: top left, bottom left;
  background-repeat: no-repeat;
}

まとめ

おそらく Bricks にグラデーション機能がないのは、背景色をプルダウンで選ぶよりも CSS のほうが圧倒的に自由度が高い ためだと思われます。
CSS を使えば、デザインのバリエーションは無限大です。

今回紹介したサンプルを参考に、ぜひ理想の背景デザインにチャレンジしてみてください。