個人的に役立ったデザイン素材や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
  • 14

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

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

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

簡単・無料で利用できるこポリゴン画像生成ジェネレーターをご紹介。 背景画像などによく使われているポ

記事を読む

壁紙に使いたい美しいピクセルパターンの壁紙15

タイル風の美しい壁紙が、「15 Calming Color Palette and Tile Wal

記事を読む

複雑なものからシンプルなものまで!シームレスなパターンを作るための方法/チュートリアル33

シームレスパターンを利用する場合、配布されているものを利用するよりは、自分でイチから作成した方がいい

記事を読む

タイポグラフィ/WEBフォントに関する作業を簡単にするツール14

WEBフォントがどんどん使われるようになるにつれ、関連するツールもたくさん出来てきています。 多い

記事を読む

写真/画像に3DCGポリゴン風エフェクトをかけてくれる無料/フリージェネレーター5つ

背景に使いたい!美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」

最近よく見かける背景画像といえば、美しいボケ味の効いた画像やカラフルなピクセルパターンですが、美しく

記事を読む

デザインのインスピレーションに最適!パーツ/テーマごとのWEBデザイン見本帳「calltoidea」

WEBデザインのインスピレーションに最適!パーツ/テーマごとのデザイン見本帳「calltoidea」

WEBデザインのインスピレーションに最適なパーツ/テーマごとのWEBデザイン見本帳「calltoid

記事を読む

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ

記事を読む

無料で使えるPhotoshop用鉛筆/ペンシルブラシ

無料で使えるPhotoshop用の鉛筆/ペンシルブラシ250+

無料で使えるPhotoshop用の鉛筆/ペンシルブラシをご紹介します。。 Photoshopで手書

記事を読む

おお便利!Adobeソフトのショートカットがブラウザで確認できる「Keyboard Shortcut Visualiser」

おお便利!Adobeソフトのショートカットがブラウザで確認できる「Keyboard Shortcut Visualiser」

Photoshop, Illustrator, InDesignなどのAdobeソフトのショートカッ

記事を読む

オリジナルなシームレスパターンをつくる!Illustratorでシームレスパターンを5分で制作する方法

複雑なシームレスパターンを制作するのは大変ですが、 単純なパターンやモノグラムぐらいでしたら、自分

記事を読む