Generated CSS
CSS background patterns are repeating visual textures created entirely through CSS gradient functions — no image files, no JavaScript, and no external dependencies. They range from simple single-color stripe grids to complex multi-layer geometric tessellations. The underlying mechanism is the browser's ability to render CSS gradients as background images and tile them infinitely using background-size to control the tile dimensions.
The entire foundation of CSS pattern work rests on a single CSS feature: the hard color stop. A normal gradient transitions smoothly between colors. A hard stop places two color stops at exactly the same position, causing an instantaneous color jump with no transition at all. The syntax blue 50%, red 50% means "be blue until exactly 50% of the gradient length, then immediately be red." Every CSS stripe, grid line, and geometric pattern is made by combining hard stops at calculated positions.
Because CSS gradients can be used as background-image values, and because the background-size property controls how large each gradient tile is before repeating, you get a repeating pattern wherever the gradient has a hard stop. A 1px blue stop in a 24px tile becomes a 1px blue line every 24px — a striped or grid pattern.
Every CSS pattern has a background-size that defines the tile dimensions. This is what you adjust to make a pattern coarser or finer. A dot grid with background-size: 24px 24px places one dot every 24 pixels in both directions. Change it to 48px 48px and the dots are spaced twice as far apart — the pattern scales up while remaining perfectly seamless. The pattern generator above adjusts this in real time so you can see exactly how scaling affects the visual density.
CSS allows multiple values for background-image, background-size, and background-position, separated by commas. Each entry creates its own layer, drawn from top to bottom. This is how complex patterns like the blueprint grid are built — one gradient creates major gridlines on a 80px tile, and a second gradient creates minor gridlines on a 16px tile, both layered on the same element. The checkerboard pattern similarly uses two offset copies of the same radial gradient on different positions.
The repeating-linear-gradient() function tiles its gradient automatically, saving you from needing to calculate background-size yourself. It repeats the gradient starting from the first hard stop to the last, using that distance as the tile size. A repeating-linear-gradient(45deg, blue 0px, blue 2px, transparent 2px, transparent 20px) produces diagonal stripes without any explicit background-size. The tradeoff is less control over the tile dimensions — background-size gives you more explicit control over spacing.
Diagonal patterns need special consideration for seamless tiling. When you rotate a stripe pattern 45 degrees, the tile must be sized so the stripe endpoints align perfectly at the tile boundary. For a 45-degree pattern with a 20px period, the tile size needs to account for the diagonal distance — approximately 20px × √2 ≈ 28px. The repeating-linear-gradient() function handles this automatically. If you're using background-size manually, test carefully for seams at different zoom levels.
CSS patterns become dynamic when you animate their background-position. Because patterns tile infinitely in all directions, moving the background position creates the illusion of continuous motion. A scrolling stripe pattern is a single CSS animation that moves background-position from 0 to the tile size — at that exact point, the pattern looks identical to where it started, creating a perfectly looping animation. This works for any direction: horizontal, vertical, or diagonal scrolling patterns all use this technique. The animation has zero runtime cost compared to JavaScript-driven canvas patterns.
The background-blend-mode property lets you blend multiple background layers using Photoshop-style blend modes — multiply, screen, overlay, hard-light, and more. This opens up a huge range of pattern effects that would be impossible with simple layering alone. A dot grid blended with a radial gradient using screen mode can produce a glowing center effect. A stripe pattern blended with a solid color using multiply produces a tinted stripe. This approach keeps everything in CSS and adds almost no additional rendering cost.
Background patterns are most effective when applied to large background elements — hero sections, card backgrounds, modal overlays, or full-page backgrounds. On small elements, a dense pattern becomes visual noise. The key design decision is opacity — most production patterns use rgba colors at 10–30% opacity so the pattern is subtle texture rather than competing visual element. The pattern generator lets you adjust opacity live so you can find the right balance for your design.
CSS gradient patterns are rendered by the browser's painting engine and cached as bitmap tiles. Once the initial tile is calculated and cached, repeating it across the element costs almost nothing. Patterns do not scale with the number of visual repetitions on screen — a 10,000-pixel-wide stripe pattern has essentially the same render cost as a 100-pixel one. However, complex multi-layer patterns with many gradient stops can increase the initial paint time. For animated patterns, background-position animation triggers re-paint on each frame, which is acceptable on modern hardware but should be tested on lower-powered devices. Using will-change: background-position on animated pattern elements can help by pre-promoting the element to its own compositor layer.
Linear and radial gradient patterns work in every modern browser with no prefixes needed. The conic-gradient() function used for checkerboard patterns reached full support in Chrome 69, Firefox 83, and Safari 12.1 — safe for all modern production use. The repeating-conic-gradient() variant has the same support level. background-blend-mode is supported everywhere modern. None of these techniques require any CSS preprocessing or build steps — they work as plain CSS with no dependencies.
A pattern tiles seamlessly when the gradient's visual output at the right edge matches the left edge exactly, and the top edge matches the bottom edge. For horizontal and vertical stripes, this happens automatically. For diagonal patterns, the tile size must account for the rotated geometry. Hard color stops are essential — smooth gradient transitions at tile boundaries create visible seams.
Yes, and they work well when used subtly. Apply the pattern CSS directly to the card element. Use border-radius and overflow: hidden to contain the pattern within the card shape. Keep the opacity low — 10 to 25% is usually enough to add texture without overwhelming the card content.
Adjust the background-size property. Larger values make the pattern coarser; smaller values make it finer. For patterns using repeating-linear-gradient() without explicit background-size, the scale is controlled by the gradient's stop positions — move the stops further apart for a coarser pattern.
Diagonal patterns with explicit background-size need the tile dimensions to match the diagonal period. For 45-degree stripes, a period of N pixels requires a tile of N × √2 ≈ 1.414 × N pixels. Using repeating-linear-gradient() avoids this calculation since it handles tiling automatically.