個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

背景画像をサッとつくれる便利ツール20選

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

背景画像をサッとつくれる便利ツールやサイトをご紹介します。
背景にちょっと手を加えるだけで、見た目がガラリと変わるWEBやグラフィック。
それだけに背景はデザインの重要な要素です。
でも、いちから自分でつくるとなると、結構手間がかかりますし、手間をかけられない案件では、作業時間を短縮してくるサービスがあったらうれしいでよね。
そこで今回は、デザインするうえで欠かせない背景を簡単につくって利用できてしまう便利なツールやサイトをまとめてご紹介します。
木目や錆び、繊維、多様なシェイプといったバリエーション豊富なものから、ストライプ、ドット、ノイズ、グラデーション、ピクセル、タータンチェックなど、さまざまなシームレスパターンを簡単に制作できてしまいますよ。
これらのツールがあれば、グラフィックもWEB、CSSも怖いものなし!
背景素材をお探しの方のご参考になれば幸いです。

Subtle Patterns

背景Backgroundをササッとつくれる便利ツール17選
いきなり背景生成ツールというわけではないのですが、質の良い背景を手軽に利用したいなら、ぜったいに外せないサイト。
とても品のいいパータン素材が現在までに400種類公開されています。
90×90 72dpiのPNG画像をダウンロードできます。
Subtle Patterns

BgPatterns

pattern-gen4
サイトに準備されている素材を利用して、カラーや大きさ、背景などを調整してパターンを作成し、PNGデータをダウンロードします。
300×300 72dpiのPNG画像をダウンロードできます。
BgPatterns

Patterns Generator by ColourLovers

pattern-gen11
COLOR A PATTERN」と「DESIGN A PATTERN」の2種類からなるツール。
前者は、サイトが準備した画像を利用して色付けしてパターンを作成、後者は、シェイプを利用してオリジナルなパターンを作成できます。
Patterns Generator by ColourLovers

PatternCooler

pattern.
サイトで準備されている約1万のパターン素材を使い、お好みのカラーに着色してダウンロードします。
着色といっても大雑把なものではなくて、細かいエレメントまで自分で色を決めることができますよ。
PNGだけのダウンロードは無料。
PatternCooler

ZenBG

pattern-gen6
サイト側で用意してくれている画像(木目、紙、繊維、サビ、岩、砂など)を利用して、好みの色付でパターンがつくれます。
PNGもしくはCSSでの利用が可能。
URL入力欄にアドレスを入力をすれば、作成した背景を目的のサイトでどうなるかを確認することができます。
1264×963 72dpiのPNG画像をダウンロードできます。
ZenBG

Background Image Generator – SiteOrigin

pattern-gen8
カラーとパターン、ブレンドモード、パターンの大きさ、ノイズ、パターンの逆転を選択できので、組み合わせは無限大?のすぐれものジェネレーター。
300×300px 72dpiのPNG画像をダウンロードできます。
さらに、画像はPNGですが、×2のPNGもダウンロード可能です。
Background Image Generator – SiteOrigin

Patternizer

pattern2
HTML5 Canvasを利用して、ストライプ、チェック、タータンチェックといったパターンを手軽につくれてしまうツールです。
つくったパターンの利用方法はコリスさんが「画像無しでアーガイルやタータンチェックなどのパターンを生成する -Patternizer」で詳しく解説してくださっていますよ。
Patternizer

Patternify

pattern-gen3
ピクセルベースのパータンを作りたいならこれ。
PNGもしくはCSSのパターンを簡単に作成できてしまいます。
Patternify

Polka Dot Pattern Generator

pattern5
ポルカドット(ごく普通の水玉模様)のPNGデータを作れるツール。
ポルカドットといっていますが、ドットの大きさ、ドット間の距離、カラーを変更できます。
Polka Dot Pattern Generator

Noise Texture Generator

pattern-gen9
その名のとおり、ノイズの入った画像を生成できるツール。
300×300 72dpiのPNG画像をダウンロードできます。
Noise Texture Generator

Tartan Maker

pattern-gen10
タータンチェックをPNGデータで手軽につくれちゃいます。
「Gallery」では、ほかの人が作成したタータンチェックの数々をみて、ダウンロードすることもできます。
Tartan Maker

Stripe Generator

pattern-gen7
カラーだけだけでなく、ストライプの角度や太さ、シャドウなども調整できるスグレモノのストライプパターン生成ツール。
PNGもしくはCSSにて利用可能です。
Stripe Generator

Stripemania

pattern-gen12
シームレスなストライプがPNGもしくはCSSでつくれてしまいます。
Stripemania

bgMaker

pattern-gen13
ピクセルパターンを手軽につくれるツールです。
saveを押せば、12×12 72dpiのPNG画像をダウンロードできます。
bgMaker galleryにいくと、他の人がつくった作品を見ることもできます。
もちろん、気に入ったものがあれば、ダウンロードも可能です。
bgMaker

Striped Backgrounds

pattern-gen14
サイズを決めると5パータンのストライプをPNGベースで作成できます。
サイズは最大2560×1600pxまでです。
Striped Backgrounds

Gradient CSS Generator

pattern-gen15
CSS3でグラーデーションを簡単につくれるジェネレーター。
こちらのツールは、グラーデーションだけでなく、角丸、ノイズ、ボックスシャドウなども作れるツールです。
Gradient CSS Generator

Ultimate CSS Gradient Generator

背景Backgroundをササッとつくれる便利ツール17選
その名のとおり、CSSでのグラデーションを生成するツールです。
いちからCSSでグラデーションをつくるのは、ちょっと面倒ですが、このツールがあれば、一瞬でお気に入りのグラデーションを生成できます。
Ultimate CSS Gradient Generator

Gradientoo

gradientoo02
CSSグラデーションをとっても簡単に生成するツールです。
使い方は説明が不要なほど、直感的に操作できます。
Gradientoo

Random CSS Gradient Generator

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」
きれいなCSSグラデーションをランダムに生成してくれる無料ツールです。
画面、右上にある「ROLL」というボタンを押せば、次々にグラデーションを生成・表示していってくれます。
気に入ったものがあれば、隣の「CODE」ボタンを押せば、コードが表示されます。
RGB、HEX、HSLの三種類が表示されます。
この値は、フォトショップなどのグラフィックスソフトでも利用できますね。
CSSで利用する場合には、画面中央にある「CSS」ボタンをクリックすれば、コードが表示されるという具合です。
Random CSS Gradient Generator

Colorful CSS Gradient Background Generator

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」
簡単にCSSグラデーションを生成できるグラデーションです。
hue(色)、saturation(彩度)、lightness(明度)から、細かく設定が可能です。
設定した結果はすぐにサイト上の背景に現れるので確認も簡単ですね。
またCSSの結果も表示されているので、コピペするだけ。
面倒ぐさがり屋さんに朗報! タイトル下にある双方向矢印マークをクリックすると、グラデーションがランダムに切り替わります。
これは便利ですね〜。
Colorful CSS Gradient Background Generator

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 16

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

通信量無制限!? 隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」

通信量無制限!? 隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」

隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」がリリースされました。

記事を読む

無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方をご紹介

無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方

Wixという無料ホームページがつくれるサービスをご存知でしょうか。 かなり以前からあったサービスで

記事を読む

商用利用できる無料のキッチン・料理関係フリーアイコン240

Freepikは、フリー素材を紹介しているサイトして有名ですが、無料の素材をまとめて配布するという太

記事を読む

全部無料!Illustratorの無料ブラシセットpart2

全部無料!Illustratorの無料ブラシセット44(総数900ブラシ以上!)part2

全部無料!Illustratorの無料ブラシセットの第二弾です。 以前の記事「全部無料!Illus

記事を読む

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

簡単にWEBサイトの背景画像が作れてしまう無料ジェネレーターのご紹介です。 つくれるのは、SVG形

記事を読む

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Fra

記事を読む

デザインのヒントはここに!海外の人気ブログで評価の高かった2013年のWEBデザイン60

新年を迎え、2013年のまとめ的な記事が海外ブログでも続々とアップされています。 そんななかから今

記事を読む

背景画像に最適!美しいぼかし/ボケ味が効いた無料のフリーテクスチャ素材320+

背景画像に最適!美しいぼかし/ボケ味が効いた無料のフリーテクスチャ素材320+

以前、「無料のPhotoshop用ぼかし(ぼけ)ブラシ17セットで幻想的な雰囲気を」という記事で、P

記事を読む

Photoshopを使ってメタリック/クロームなシェイプを作成する方法:海外チュートリアル翻訳01

海外のサイトにはPhotoshopやIllustratorをはじめとした代表的なソフトを使ったチュー

記事を読む

無料で使える角丸・丸文字の英語/欧文フリーフォント

無料で使える角丸・丸文字の英語/欧文フリーフォント28でポップでかわいい演出を

無料で使える角丸・丸文字の英語/欧文フリーフォントのご紹介します。 デザインにポップな印象やかわい

記事を読む