Web制作

【CSS】背景パターンをコピペで作成できるジェネレーターまとめ

背景パターンCSSをコピペで作成できるジェネレーター

CSSでグラデーションやストライプなどの特殊な背景を設定する時に便利なジェネレーターをまとめて紹介します。

各ブラウザに対応したCSSをコピペで簡単に設置できてしまうので、かなり重宝しています。

では、さっそくみていきましょう。

Ultimate CSS Gradient Generator

[browser-shot url=”https://www.colorzilla.com/gradient-editor/” width=”1200″ height=”600″]

CSSでグラデーションを作りたい時にはいつもお世話になっているサイトです。昔はグラデーション表現するのに画像をいちいち作っていましたが、CSSで作れば色の変更も簡単で管理も楽なので本当に助かってます。

URL:https://www.colorzilla.com/gradient-editor/

CSS3 PIE

[browser-shot url=”https://css3pie.com/demos/gradient-patterns/” width=”1200″ height=”600″]

基本的な縦横の縞模様やチェック柄のCSSを始めとしたパターンが紹介されています。

URL:https://css3pie.com/demos/gradient-patterns/

CSS3 Patterns Gallery

[browser-shot url=”https://lea.verou.me/css3patterns/” width=”1200″ height=”600″]

他ではなかなか見られないCSSパターンが紹介されていて、サイトに訪れるだけでも面白いサイトです。

使いたいパターンをクリックすればCSSが表示されます。

URL:https://lea.verou.me/css3patterns/

Dotted and Striped

[browser-shot url=”https://codepen.io/aleprieto/pen/nAmIy” width=”1200″ height=”600″]

ジェネレーターではないですが、最近良く使ってるドットを表現するCSSです。画像や動画の上に文字を乗せたい時にそのままだと見づらいので、オーバーレイでこういったCSSや重ねる用の画像を使っています。

URL:https://codepen.io/aleprieto/pen/nAmIy

まとめ

CSSジェネレーターは他にもありますが、個人的にここで紹介したものが使いやすいかなと思っています。

もし他に優れたジェネレーターなどありましたらぜひ教えていただけたら幸いです。

ABOUT ME
ぎしたか
ぎしたか
埼玉県在住フリーランス|Webデザイナー・フロントエンジニア・仮想通貨/FXライター|2019年の目標→エンジニア転向|Webサイトを作ったり記事を書いています。今も紙の本が好きです。(`・ω・´) 詳しいプロフィールはこちら