ワイヤーでデザインなどで使用するグラデーション背景やパターン背景を手っ取り早く用意したいときに便利なリソース・ジェネレータのまとめです。
中にはCSSコードで出力してくれるものもあるので、それらは既にコーディング済みのページに適用させるのも楽だと思います。
本格的に使用する場合は有償だったりライセンスに注意すべきものもありますが、多くはフリーで使用できて且つ自分好みにカスタマイズしたものをダウンロードできるようになっています。
サイトによってはライセンスに注意が必要なので、使用する際は各自で再度確認してください。
CSS3 Patterns Gallery
CSSで再現できるパターン集で、少し変わった見栄えもlinear-gradient()やradial-gradient()を用いて表現しています。
実装に必要なコードは、それぞれパターンサークルをクリックすると確認できます。
Gradient Magic
こちらもCSSのlinear-gradient()やradial-gradient()を用いて表現した背景がまとめられているサイトで、上で紹介したものよりもシンプルで使いやすいものが多いです。
また、使用カラーや角度などを任意でカスタマイズすることもできます。
Gradient Backgrounds
「uiGradients」「WebGradients」「CoolHue」など、綺麗なグラデーションをCSSで実装するためのコードを確認できたりイメージでダウンロードすることができる各サイトをさらにまとめたサイトです。
Trianglify.io
ローポリゴンイメージを作成できるジェネレータで、パターン・セルサイズ・カラーを変更して任意の見栄えにできます。
注意点として実際に使用する際の高解像度版（PNGとSVG）は有償でダウンロードする形になるので、低解像度版を当てはめてしっくりきたら高解像度を購入という流れになると思います。
background generator
レイアウトと配置するオブジェクトを選択することでパターン背景を作成できるジェネレータで、SVG・PNG・JPGの形式でダウンロードできます。
オブジェクトは絵文字を使用したり自身でアップしたものを適用することも可能で、その他オプションとしてオブジェクトのサイズ・距離・角度を変えたり、カラー変更やブラー処理なども用意されています。
Seamless Pattern Maker
同じくパターン背景を作成できるジェネレータです。
こちらはFont AwesomeやLine Iconsのアイコンをオブジェクトとして配置できるようになっており、配置したオブジェクトをそれぞれカラー変更したりサイズ変更することもできます。
また、自身でアップしたものをオブジェクトや背景に適用させることも可能で、作成したものはPNG形式でダウンロードできます。
Create Customizable
全体的にユニークな感じのSVG背景がまとめられています。
そのままダウンロードするだけなく表示されているものをベースにカラーやスケールなどを自分好みに調整することもでき、Base64を用いたCSSコードも出力されます。
ライセンスはCC BY 4.0です。
Hero Patterns
リピート可能なSVG背景がまとめられており、カラー変更や透過具合などを調整できます。
SVGダウンロードとBase64を用いたCSSコードが確認でき、ライセンスはCC BY 4.0です。
Transparent Textures
単色や他の背景イメージの上に重ねて使用する想定の透過パターンがまとめられています。
PNG形式でダウンロードできる他、直接サイトからパスを読み込む形でCSSコードも出力されます。
Subtle Patterns
様々なパターン素材がまとめられており、全体的にシンプルな感じのものが多めです。
PNG形式でダウンロードでき、ラインセンスはCC BY-SA 3.0です。