Nifty #1: Web design resources: repeating background images

Published by

On a recent episode of the Syntax podcast, Wes and Scott listed some very handy places to get background patterns for web design, including repeating patterns and some SVG-based options.

I used to grab designs from Subtle Patterns a lot (looks like Toptal runs that site now?).

They also pointed out Hero Patterns, where you can customize the foreground and background colors, and the foreground opacity, before downloading the pattern as an SVG w/ CSS.

My favorite was a tool at Flaticon: pattern.flaticon.com. You can set a background color and opacity, then choose a series of icons and images to lay out how you wish, to create a custom repeating background image.

Like this:

A repeating background image that I made at pattern.flaticon.com

Very cool. There’s lots of icon packs to choose from, and it’s really fun just to tinker around with different layouts for the repeating backgrounds.