Pattern & Gradient Generators

Design Finds

Today I want to share a few gems I've found hiding around the web over the last few years while looking for design inspiration. But first, I want to say... I love patterns and gradients. I love to mix and match them. A subtle pattern or gradient is usually what makes a design really shine for me.

I will confess that pattern and gradient generators are a dime-a-dozen around the internet these days, so for the purposes of this list, I want to focus only on the generators that meet a high threshold of standards. First, I must have used them in multiple projects over the years. Second, they must be free, completely free, even for commercial use. Third, they must have a unique and interesting set of patterns that they allow you to create. Finally, they must be easy to export and incorporate into your projects with as little muss and fuss as possible.

HeroPatterns.com

Hero Patterns has a small but quality selection of tilling SVG patterns. The simplicity of the patterns really stands out, making them great for subtle use in designs. From the classic single-pixel dot pattern, their "Texture" pattern, to their quirky "Random Shapes" pattern, you can find something to fit your design style.

A nice touch is their simple foreground and background color picker and foreground opacity slider that makes previewing the patterns extremely easy. However, the export dialogue leaves a little bit to be desired. My main gripe is a minor one I'll admit, as the only export option is to separately export the CSS and the un-styled SVG. This is great if you are wanting to import it into an existing web design, but it doesn't help when you want to open it as an image or use it in a program like Adobe Illustrator. A styled SVG download would be appreciated.

Art-Of-The-Gradient.Tone-Row.com

L'art du degrade by Tone Row is one of those special tools that comes around occasionally. It's drag-and-drop layer manager will make Photoshop users blush, the intuitive nature of the controls make the design experience top-notch, and the endless options really bend the creative power of CSS gradients to your will. It's singular focus on the task means there is literally no way that I will ever stop gushing about this tool.

I have zero complaints about the interface for this app. The export options are fantastic, one-click CSS copy, PNG download, easy options to share your creations, even CodePen integration. Tone Row, the app’s author is very active on GitHub and responds quickly to issues and requests for help and has added newly requested feature in less than a week. It's truly a tool to behold, go play with it!

Doodad.dev/pattern-generator

The doodad.dev pattern generator is an impressive tool. It has tons of built-in pattern styles to choose from as starting points then allows you to add filters and transformations to each layer of the design that can eventually result at some pretty wacky creations. With each filter you are given frequency and scale or standard deviation sliders where appropriate. For the overall design you are given three transformers, along with size and rotation sliders. All around it probably allows for the generation of the most interesting patterns on the internet.

The interface is a bit odd as it employs a window manager style that looks a bit clunky/dated by modern standards, but its fast, lightweight, and functional, so this isn't a big complaint. The export options on the other hand are superb. You can save them to JPG or PNG, allowing you to specify the width and height, it will generate inline SVG or gives you the option to download SVG with width and height controls, and finally it will generate a CSS background image property. Tack-on free sharing and collaboration tools and you have an excellent design tool.