CSSデザインCSS3のグラデーションを使用すると、フリーの画像素材を使わなくても色鮮やかなマルチボーダー柄の背景を作ることができます。このページでは、cssで背景に複数のグラデーションを設定して作ったカラフルなボーダー柄のデザインのサンプルを紹介しています。全てコピペでホームページやブログに実装できますが、色や透明度の設定を変更するだけで、何通りもの表現ができるので、是非サイトのデザインに合わせて試してみて下さい。マルチボーダー柄の背景サンプル色や透明度の設定方法などは一番最後に紹介しています。CSSのコードの「body」の部分を適用したい箇所に合わせて変更して下さい。背景には4パターンのlinear-gradientを設定しています。どのグラデーションも色を変える位置は30%までにし、background-sizeプロパティでリピートされる範囲をそれぞれ変わるように設定しています。することで、各ボーダーの太さがバラバラになり、繰り返される幅もそれぞれ変わるため、ランダムな感じの背景表現ができます。色をパステルカラーにしたり、透過する事で全く違う雰囲気の背景となります。色を変えたい場合はbackground-colorプロパティのカラーコードを変更して下さい。それとlinear-gradientで指定しているrgba()内の数値を変更すると各ボーダーの色が変わります。0.1)」の場合なら「0.1」の部分を変更すれば透過率が変わります。数値を1に近づけるほど不透明、0に近づけるほど透明となります。あとベンダープレフィックスは、必要に応じて追加・削除して下さい。(分からない場合は気にしないで下さい。ちなみにFirefoxに対応させる場合は、90度角度を変更した設定を追加して下さい。まとめこんな感じでランダムな感じのマルチボーダー柄を作ることができます。