メッシュグラデーション背景のCSSジェネレーター
複数の色が混ざり合い、ゆっくりと動く背景デザインを生成します。画像を使わずCSSのみで作成できるコードを出力します。
プレビュー
<div class="mesh-gradient"></div>.mesh-gradient {
width: 100%;
height: 300px;
background-color: #ffffff;
background-image:
radial-gradient(at 0% 0%, {{c1}} 0px, transparent 50%),
radial-gradient(at 50% 0%, {{c2}} 0px, transparent 50%),
radial-gradient(at 100% 0%, {{c3}} 0px, transparent 50%),
radial-gradient(at 0% 50%, {{c4}} 0px, transparent 50%),
radial-gradient(at 100% 50%, {{c1}} 0px, transparent 50%),
radial-gradient(at 0% 100%, {{c2}} 0px, transparent 50%),
radial-gradient(at 50% 100%, {{c3}} 0px, transparent 50%),
radial-gradient(at 100% 100%, {{c4}} 0px, transparent 50%);
background-size: 200% 200%;
animation: mesh-move {{speed}}s ease infinite;
}
@keyframes mesh-move {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 100%;
}
}機能・使い方
- 複数の色が混ざり合い、ゆっくりと動く背景デザインを生成します。
- プリセットカラーボタンを使うと、色の組み合わせを簡単に切り替えられます。
- アニメーション時間の数値を大きくすると、動きがゆっくりになります。
- 生成されたCSSは、1つの
div要素だけで動作します。
ポイント
背景色を透過させたり、background-blend-modeを組み合わせることで、さらに複雑な表現も可能です。
メインビジュアルの背景に使用する場合は、上に白いテキストを乗せると可読性とデザイン性を両立できます。
