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

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

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

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

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

Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

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

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

CSS3 PIE

http://css3pie.com/demos/gradient-patterns/

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

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

CSS3 Patterns Gallery

http://lea.verou.me/css3patterns/

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

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

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

Dotted and Striped

http://codepen.io/aleprieto/pen/nAmIy

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

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

まとめ

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

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

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA