CSS Background Pattern Generator with Data URI and PNG

If you are looking to generate some cool background pattern image for your blog/website or for any other purpose, this tool makes it easy. You can fine more info on usage underneath the tool.

This page is not compatible for Mobile Devices. If you are using a Tablet, please rotate it to Landscape mode. If you are on Computer, please ignore this message.

If you came here looking for something else, we also have Gradient Picker and Color Picker tools.

Read Instruction below if you cannot use the Pen

View in Fullscreen Mode

How to use this Background Pattern Generator tool

• Select a Background Color first if you want or just leave it as it is. It is transparent by default.
• If you only want a plain background, you don’t need to do anything else after selecting the background color. Just download the Image file or Copy Data URI. If you want to create a pattern, follow the steps below.
• Now select a Pen Color to create a pattern.
• Click on the box on the left side and click on different places. It will show you a preview of the pattern on the right side.
• Scale option can be zoomed to zoom the pattern
• Once you are satisfied with the created pattern, click the Download button to get a PNG image or copy Data URI (whatever you need).