Free CSS Pattern Generator

CSS Background Patterns: Pictures Drawn in Five Lines of CSS

A CSS background pattern is a tiled image (stripes, dots, grids, checkerboards, triangles) drawn entirely with CSS gradient functions and no image file. Three properties do all the work: background-image paints any gradient image into the element, background-size sets the size of one tile of that image, and background-repeat (which defaults to repeat) tiles that image across both axes. background-position then offsets the seam so each layer's tile lines up with the others. A pattern is therefore just multiple gradient images stacked on top of one another, each sized to the same tile, each positioned to interlock. Browsers paint comma-separated background-image values from front to back, so the first image in the list sits on top of the second, the second on top of the third, and so on.

The whole genre exists thanks to one syntactic trick: hard color stops. Adjacent color stops at the same position produce an instantaneous transition rather than a blend. linear-gradient(red 50%, blue 50%) isn't a fade from red to blue (it's a sharp line. Without hard stops you get a smooth gradient; with them you get geometry. Stripes, dots, checkers, triangles, chevrons) every pattern this tool emits is built from that single property, applied at different angles and tile sizes.

A Short History, Lea Verou and the Patterns Gallery

If one resource is responsible for the whole genre of pure-CSS background patterns, it is the CSS3 Patterns Gallery by Lea Verou, originally hosted at lea.verou.me/css3patterns/. Verou had been posting individual demos through 2010 and into early 2011, including a celebrated checkerboard walkthrough in February 2011, before announcing the gallery proper on 15 April 2011 in a post titled "CSS3 patterns gallery and a new pattern" (the new pattern was a Japanese-cubes design she called the hardest one she had ever made). A few months later, on 1 December 2011, she wrote the canonical "CSS3 Patterns, Explained" essay for the 24 ways advent calendar, still the best plain-English explanation of the hard-color-stop technique that underpins every stripe, polka dot and checkerboard pattern. In June 2015 O'Reilly published her book CSS Secrets: Better Solutions to Everyday Web Design Problems, which expanded the patterns chapter into a full taxonomy. The gallery's broader cultural impact is documented in Verou's own project notes: it "started the widespread practice of using hard stops in CSS gradients to easily create background patterns and other graphics" and was later used by Opera Software's engineers to fine-tune their gradients implementation.

From Vendor Prefix to Specification

CSS gradients are defined in the CSS Image Values and Replaced Content Module Level 3 (commonly "CSS Images 3"), maintained by the W3C CSS Working Group and edited by Tab Atkins Jr. and Elika J. Etemad among others. The First Public Working Draft was 12 July 2011; the spec reached Candidate Recommendation in April 2012, locking the modern unprefixed syntax, including the convention that 0deg points upward and to right equals 90deg. Browser shipping order: WebKit was first by a wide margin, with -webkit-gradient() usable in Safari 4 (2009); Firefox shipped -moz-linear-gradient() in Firefox 3.6 (21 January 2010); Internet Explorer 10 shipped the unprefixed forms in 2012; the unprefixed syntax stabilised across all major engines by late 2013. conic-gradient() was specified in CSS Images Level 4 because Level 3 had already entered Last Call when the syntax was being designed; it shipped in Chrome 69 (4 September 2018), Safari 12.1 (25 March 2019) and Firefox 83 (17 November 2020). In 2026 you can write background: linear-gradient(...) and background: conic-gradient(...) confidently with no prefixes and no fallbacks for any browser worth supporting.

linear-gradient: Angles and Sides

The formal grammar is linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). The angle convention frequently trips developers up because it differs from the SVG/canvas convention. 0deg is equivalent to to top (the gradient line points upward, so the last colour appears at the top of the box). 90deg equals to right. 180deg equals to bottom (the default if no direction is given). 270deg equals to left. Increasing angles rotate clockwise from top, the opposite of the mathematical convention (where 0 is right and angles increase counter-clockwise) and the opposite of SVG's <linearGradient>. A useful subtlety: to right and 90deg are equivalent only on square boxes. On a non-square box, to top right produces a gradient line exactly perpendicular to the diagonal from the bottom-left corner (meaning the gradient hits the corner cleanly) while 45deg is always literally 45 degrees, regardless of aspect ratio. This matters less for tiled patterns (where tiles are usually square) but matters a lot for hero backgrounds.

radial-gradient: Shapes, Sizes and Polka Dots

The grammar is radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). The two shape values are circle and ellipse (default ellipse). The size can be one of four extent keywords (closest-side, closest-corner, farthest-side or farthest-corner (the default)) or explicit lengths/percentages. For polka-dot patterns the canonical recipe is radial-gradient(circle at center, #000 0 5px, transparent 5px) with background-size: 20px 20px: a 5-px black circle in the centre of every 20-px tile, with the rest transparent. The dots can be offset with a second layer at half a tile to produce a hexagonal dot grid. For pure stripes you do not need to size the tile manually: repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) produces black-and-white diagonal stripes 10 px wide, repeating across the entire box, with no background-size declaration needed. Repeating gradients have radial and conic counterparts too, repeating-radial-gradient makes concentric rings, repeating-conic-gradient makes pinwheels.

conic-gradient: The Pie Charts and Sunbursts You Couldn't Build Before

conic-gradient() rotates colour stops around a centre rather than along a line or out from a centre. Color stops are positioned in angles, not lengths. The intellectual history is one of the more interesting CSS stories: Lea Verou drafted a conical-gradient() proposal as early as 2011, well before any browser supported it, and Tab Atkins Jr. credited her draft when he formally added the function to CSS Image Values Level 4. Implementation lagged for years. In June 2015, Verou wrote a polyfill (using SVG and her -prefix-free library) and released it on stage at CSSConf, calling the post "Conical gradients, today!" Native shipping arrived in Chrome 69 (4 September 2018), Safari 12.1 (25 March 2019), and Firefox 83 (17 November 2020). What conic gradients unlock that linear and radial cannot: pie charts and donut charts without canvas, SVG or JS (conic-gradient(red 0 25%, blue 25% 60%, green 60% 100%) plus border-radius: 50% is a complete pie chart); colour wheels (conic-gradient(red, yellow, lime, aqua, blue, magenta, red) produces the standard hue wheel); sunburst and starburst patterns from alternating hard-stop colours at small angle intervals; gradient frames and angled corner highlights; and checkerboards in one declaration (repeating-conic-gradient(#000 0 25%, #fff 0 50%) plus background-size produces a checkerboard with a single gradient layer instead of two stacked linear gradients).

Performance: When CSS Patterns Beat Images, and When They Don't

The performance argument for pure-CSS patterns is the one most worth getting right because it gets oversimplified in marketing copy. Wins of pure CSS: no HTTP request, no decode, no PNG/JPEG/WebP overhead (a 4-line CSS rule replaces a binary file; vector-resolution-independent) a pattern looks identical at 1×, 2×, 3× device pixel ratio with no need to ship @2x and @3x assets, which is the single biggest reason design systems prefer gradient patterns over PNGs for retina displays; trivially recolourable, changing a CSS variable updates the whole pattern; animatable via background-position or, with @property, via animatable colour stops. Costs to know about: paint cost scales with pixels touched and gradient complexity, gradients are among the more expensive paint operations alongside large box-shadows, complex SVGs and heavy text effects, and stacking many gradient layers across a full-viewport hero can cost frames on low-end GPUs. Animating gradient colours triggers full repaints every frame (this is changing with @property-registered custom properties in Chromium and Firefox, but is still safer to animate background-position instead). The practical heuristic: if you have a single full-viewport pattern and you are not animating it, you will not notice. If you are stacking five gradient layers on every card in a long list, profile it.

Accessibility: Contrast, Decoration, and Reduced Motion

CSS background patterns are, by definition, decorative. They do not appear in the document tree or the accessibility tree; from an assistive-technology perspective they simply don't exist. That is largely a feature, the W3C WAI tutorial on Decorative Images explicitly says that decorative imagery "should be provided using CSS background images instead" of <img> so it is naturally ignored by screen readers. But contrast still applies to anything you put on top of the pattern. WCAG 2.1 Success Criterion 1.4.3 requires a 4.5:1 contrast ratio for normal text and 3:1 for large text. Patterns make this harder because the local luminance of the background varies pixel by pixel. WCAG Technique G18 addresses this directly: if the background is patterned, the background around the letters can be chosen or shaded so that the letters maintain a 4.5:1 contrast ratio with the background behind them, even if they do not have that contrast ratio with the entire background. In practice: if you put text on top of a pattern, either choose pattern colours with similar luminance to each other, or place a solid-colour card between the text and the pattern. WCAG 2.1 also requires 3:1 contrast for non-text UI components and graphics, which can apply to pattern-based icons and dividers. If your pattern is animated (a scrolling stripe, a slowly rotating conic, a shimmer skeleton) wrap the animation in @media (prefers-reduced-motion: no-preference). The motivation is medical, not stylistic: animations can trigger vestibular symptoms (nausea, dizziness), seizures in users with photosensitive epilepsy, and migraines.

SVG Patterns vs CSS Gradients: A Fair Comparison

The SVG <pattern> element is the spiritual sibling of CSS gradients. Both let you tile a unit cell across a fill area. They have different sweet spots. SVG patterns win when the unit is a complex shape (a leaf, a fish-scale, an irregular hexagon) that gradients can't naturally express; when you want to ship a designer-authored asset (Hero Patterns by Steve Schoger, launched 27 September 2016 under CC BY 4.0, is the canonical SVG pattern library); when you need precise vector geometry for sharp curves that gradient hard-stops can only approximate; or when you want the pattern reused across multiple SVG elements via fill="url(#myPattern)". CSS gradients win when the pattern is geometric, stripes, dots, grids, checkerboards, chevrons, triangles, anything composable from straight lines and circles; when you want zero HTTP overhead; when you need per-instance customisation via CSS variables (--stripe-color: red updates the pattern instantly); when you want to apply the pattern as a CSS background to any HTML element, not only inside an SVG; or when you want to animate the pattern without <animate> elements. A common hybrid technique is to inline an SVG as a data:image/svg+xml,... URL inside background-image: this gets the no-extra-HTTP-request win of pure CSS while letting designers express arbitrary shapes. The downside is encoding fiddliness: # becomes %23, double quotes need escaping, and inspecting the SVG in DevTools is awkward. This generator emits pure-CSS gradient patterns; the trade-off is intentional, simplicity and small payload over maximum shape flexibility.

Where CSS Patterns Earn Their Keep

The genre is broader than wallpaper. Real production uses include:

• Hero section backgrounds. Subtle large-scale patterns behind the page title (diagonal lines, large dots, a soft conic-gradient sunburst) give a hero visual texture without adding image weight.
• Empty-state placeholders. When a list has no items, a checkerboard or grid pattern in the empty area communicates "this is intentionally blank" better than flat white space.
• Loading skeletons. The classic "shimmer" skeleton is a linear-gradient with semi-transparent white moving across a grey background, animated via background-position. The technique is now a UX standard.
• Card and badge backgrounds. A faint dot-grid behind a "Pro" badge or a diagonal pinstripe behind a feature card adds texture without competing with the text.
• Error and warning states. Repeating diagonal stripes (the road-cone pattern) signal "warning zone" intuitively. repeating-linear-gradient(45deg, #fbbf24 0 10px, #1f2937 10px 20px) is the universal "attention" overlay.
• Retro and synthwave aesthetics. The 80s Tron grid (a perspective-warped magenta grid rolling toward a horizon) is a pure-CSS effect built from a repeating-linear-gradient plus transform: perspective(...) rotateX(...).
• Section dividers. A short, full-width band of pattern between sections breaks up a long page without adding semantic weight.
• Print-friendly perforations. Dotted/dashed perforation lines for printable tickets and coupons are easier to author with repeating-linear-gradient than with SVG.
• Light/dark mode patterns. Patterns trade well between light and dark mode because they're driven by CSS variables; one declaration adapts to both palettes.

How to Use This Generator

1. Choose a pattern type, stripes, dots, checkerboard, grid, zigzag, triangles. Each preset is a known-good combination of one or two gradients.
2. Adjust the foreground and background colour, the tile size, and (where applicable) the opacity. The preview updates as you drag.
3. Copy the generated CSS. The output is a single background shorthand value you can paste into any selector. The generator emits no vendor prefixes because none are needed in 2026.
4. If you need text on top, place it in a child element with a solid-colour card behind it to maintain WCAG contrast. If you animate the pattern, wrap the animation in a prefers-reduced-motion: no-preference media query.

Frequently Asked Questions

Will the CSS work in older browsers?

Every major modern browser ships linear-gradient, radial-gradient and the repeating variants unprefixed and on by default, the cleanup completed in late 2013. conic-gradient took longer (Chrome 69 in September 2018, Safari 12.1 in March 2019, Firefox 83 in November 2020) but is also universal in 2026. The generator does not emit vendor prefixes because none are needed for any browser worth supporting. Microsoft Edge dropped its EdgeHTML engine in January 2020 and IE11 reached end-of-life on 15 June 2022; both are now historical footnotes for any new tool.

Are CSS patterns faster than tiled image backgrounds?

For static patterns, yes, a CSS pattern eliminates an HTTP request, a decode pass, and the multi-resolution asset shipping required for retina displays. The pattern is also vector-perfect at any zoom and trivially recolourable through CSS variables. The trade-off is paint cost: gradients are among the more expensive things a browser can paint, and stacking many gradient layers across a full-viewport hero can cost frames on lower-end GPUs. For a single static pattern on a card or a section, you will not notice. If you find yourself stacking five gradient layers on every item in a long list, profile it before shipping.

How do I put text on top of a pattern accessibly?

WCAG 2.1 SC 1.4.3 requires 4.5:1 contrast for normal text and 3:1 for large text against the background. With a patterned background the local luminance varies pixel by pixel, which can make worst-case contrast fail even if the average contrast looks fine. Two safe strategies: choose pattern colours with similar luminance to each other (so the contrast against your text is consistent across the whole tile), or place a solid-coloured card between the text and the pattern. Putting text directly on a high-contrast pattern (e.g. black-and-white stripes) is the case where contrast checkers and human readers both struggle.

Can I animate the pattern?

Yes. The cheapest animation is to shift background-position with @keyframes: this triggers a compositor-only update on most browsers and can run smoothly at 60 fps. Animating the gradient colours themselves is more expensive because each frame triggers a full paint; modern Chromium and Firefox can mitigate this with @property-registered custom properties, but background-position is the safer default. Always wrap the animation in @media (prefers-reduced-motion: no-preference): animated backgrounds can trigger vestibular symptoms, seizures and migraines for sensitive users.

Why does my pattern look blurry on retina displays?

It shouldn't, that's the whole point of using gradients instead of bitmap images. If yours does, check that the colour stops are at sharp percentages (a hard stop is two stops at the same position; a slight gap of even 50% 50.1% introduces a visible blur band) and that the tile sizing is in px rather than em or %, which can interact unpredictably with text scaling. Conic gradients on older Safari versions used to render the centre as a slightly blurry area; modern Safari and Chrome both rasterise on the GPU and the issue is largely gone.

Is my data sent anywhere?

No. Pattern selection, colour picking, sizing and CSS generation all run in your browser. There are no outbound requests when you use the controls, you can verify in DevTools' Network tab. The generated CSS is yours to paste anywhere.

Related Tools