手っ取り早くグラデーションやパターン背景を用意したいときに便利なリソース・ジェネレータ 10

手っ取り早くグラデーションやパターン背景を用意したいときに便利なリソース・ジェネレータ 10

ワイヤーでデザインなどで使用するグラデーション背景やパターン背景を手っ取り早く用意したいときに便利なリソース・ジェネレータのまとめです。
中にはCSSコードで出力してくれるものもあるので、それらは既にコーディング済みのページに適用させるのも楽だと思います。
本格的に使用する場合は有償だったりライセンスに注意すべきものもありますが、多くはフリーで使用できて且つ自分好みにカスタマイズしたものをダウンロードできるようになっています。

※サイトによってはライセンスに注意が必要なので、使用する際は各自で再度確認してください。

CSS3 Patterns Gallery

CSS3 Patterns Gallery

CSSで再現できるパターン集で、少し変わった見栄えもlinear-gradient()radial-gradient()を用いて表現しています。
実装に必要なコードは、それぞれパターンサークルをクリックすると確認できます。

Gradient Magic

Gradient Magic

こちらもCSSのlinear-gradient()radial-gradient()を用いて表現した背景がまとめられているサイトで、上で紹介したものよりもシンプルで使いやすいものが多いです。
また、使用カラーや角度などを任意でカスタマイズすることもできます。

Gradient Backgrounds

Gradient Backgrounds

「uiGradients」「WebGradients」「CoolHue」など、綺麗なグラデーションをCSSで実装するためのコードを確認できたりイメージでダウンロードすることができる各サイトをさらにまとめ他サイトです。

Trianglify.io

Trianglify.io

ローポリゴンイメージを作成できるジェネレータで、パターン・セルサイズ・カラーを変更して任意の見栄えにできます。
注意点として実際に使用する際の高解像度版(PNGとSVG)は有償でダウンロードする形になるので、低解像度版を当てはめてしっくりきたら高解像度を購入という流れになると思います。

background generator

background generator

レイアウトと配置するオブジェクトを選択することでパターン背景を作成できるジェネレータで、SVG・PNG・JPGの形式でダウンロードできます。
オブジェクトは絵文字を使用したり自身でアップしたものを適用することも可能で、その他オプションとしてオブジェクトのサイズ・距離・角度を変えたり、カラー変更やブラー処理なども用意されています。

Seamless Pattern Maker

Seamless Pattern Maker

同じくパターン背景を作成できるジェネレータです。
こちらはFont AwesomeやLine Iconsのアイコンをオブジェクトとして配置できるようになっており、配置したオブジェクトをそれぞれカラー変更したりサイズ変更することもできます。
また、自身でアップしたものをオブジェクトや背景に適用させることも可能で、作成したものはPNG形式でダウンロードできます。

Create Customizable

Create Customizable

全体的にユニークな感じのSVG背景がまとめられています。
そのままダウンロードするだけなく表示されているものをベースにカラーやスケールなどを自分好みに調整することもでき、Base64を用いたCSSコードも出力されます。
ライセンスはCC BY 4.0です。

Hero Patterns

Hero Patterns

リピート可能なSVG背景がまとめられており、カラー変更や透過具合などを調整できます。
SVGダウンロードとBase64を用いたCSSコードが確認でき、ライセンスはCC BY 4.0です。

Transparent Textures

Transparent Textures

単色や他の背景イメージの上に重ねて使用する想定の透過パターンがまとめられています。
PNG形式でダウンロードできる他、直接サイトからパスを読み込む形でCSSコードも出力されます。

Subtle Patterns

Subtle Patterns

様々なパターン素材がまとめられており、全体的にシンプルな感じのものが多めです。
PNG形式でダウンロードでき、ラインセンスはCC BY-SA 3.0です。

Close the search window,
please press close button or esc key.