Documentation

Using patternizer.com

Here are a few tips:

• Unique URLs are generated for each pattern (/p/), and each save creates a new numbered version (/p) for that URL. Sign up if you want to keep your patterns organized.
• I find the best results come from play, not attempting exact precision.
• Use the up/down arrow keys for minor 1px shifts, and if your cursor is in a text input, shift-up/down moves 10px.
• Drag n drop to reorder stripes. Stripes are drawn in the same stacking order that you see in the panel.
• If offset isn’t doing what you want, try flipping the angle 180 degrees. It will look exactly the same, but have the opposite effect.
• Super-user tip: Shift-click multiple stripes to set all their values at once. Be careful with this though, it can quickly make changes you may not want.

Using the generated CSS in a webpage

Patternizer generates pure CSS backgrounds that work in all modern browsers and mobile devices!

Copy the CSS from the Code tab and apply it to any block-level element.

Example HTML:

<div class="pattern"></div>

Example CSS (from the Code tab):

.pattern {
  background-color: #ffffff;
  background-image: repeating-linear-gradient(...);
}