Home › Developer Tools › CSS Background Pattern Generator
CSS Background Pattern Generator
Pick a pattern, set the colors, tile size and thickness, and get clean CSS that draws it with gradients only. No image files, no extra HTTP requests, and the pattern stays sharp at any zoom level.
Last updated:
Advertisement
Advertisement
How to use the CSS Background Pattern Generator
- Choose a pattern from the gallery at the top (arrow keys also work).
- Pick the colors with the pickers, hex fields or a preset, or press Randomize colors.
- Adjust tile size and thickness, plus the angle for stripes and the opacity for a subtler texture.
- Choose the code format: longhand CSS is easiest to edit, shorthand is compact, HTML demo is a ready test page.
- Copy or download the code and add the class to any element, such as
<body class="pattern">.
How pure CSS patterns work
A CSS pattern is made of gradient layers. Each layer is drawn inside a tile whose size comes from background-size, and the browser repeats that tile in both directions. Three ideas do almost all the work:
- Hard stops. Two stops at the same position, like
#000 50%, transparent 50%, create a sharp edge instead of a fade. - Layer stacking. The first layer in
background-imageis painted on top. Combining two or four layers produces grids, zigzags and diamonds. - Offsets.
background-positionshifts individual layers, for example by half a tile to stagger polka dots.
Which gradient draws which pattern
| Pattern | Gradient used | Good for |
|---|---|---|
| Stripes | repeating-linear-gradient at any angle | Banners, progress bars, "under construction" bands |
| Polka dots, dot grid | radial-gradient(circle, …), two offset layers for polka | Playful sections, subtle page textures |
| Checkerboard | repeating-conic-gradient in 25% steps | Transparency backgrounds, game boards, racing themes |
| Grid, graph paper | Thin linear-gradient lines in two directions | Blueprint and notebook looks, design canvases |
| Zigzag, diamonds | Four linear-gradient triangles at 45° steps | Headers, packaging-style backgrounds |
| Gingham | Two semi-transparent bands that overlap | Picnic, food and farmhouse designs |
| Triangles | conic-gradient with a 60° slice | Geometric hero sections |
| Waves, half circles, ripples | radial-gradient rings and arcs | Water, retro and Art Deco styles |
Tips for using patterns on real pages
- Behind body text, keep the contrast between the two pattern colors low and the opacity at 10 to 30%, or place text on a solid card.
- Use
background-attachment: fixedfor a pattern that stays still while content scrolls over it. - Very small tiles (under 8px) can shimmer (moiré) when the page is zoomed or scrolled; sizes from 16px up look calmer.
- Store the colors in custom properties, e.g.
--p1and--p2, to switch the pattern's theme with one line.
Frequently asked questions
How do you make a background pattern with only CSS?
Stack one or more gradients in background-image and make them repeat with background-size. Each gradient draws a shape inside one tile, such as a circle from radial-gradient or a triangle from linear-gradient with a hard stop, and the browser tiles it across the element. The generator writes these layers for you.
Are CSS gradient patterns better than image patterns?
For simple geometric patterns, usually yes: they weigh a few hundred bytes, need no extra request, scale perfectly on high-density screens and can be recolored by editing a hex value. Complex illustrated patterns are still better as SVG or PNG files.
How do I make hard-edged stripes with CSS?
Put two color stops at the same position so there is no blend, for example repeating-linear-gradient(45deg, #2f6b4f 0 20px, transparent 20px 40px). The first color fills 0 to 20px, the second 20px to 40px, and the pattern repeats every 40px.
Do these patterns work in all browsers?
Linear and radial gradients work in every current browser. The checkerboard and triangles use conic-gradient, which is supported by Chrome, Edge, Firefox and Safari since 2021. Older browsers simply show the background color.
How can I make the pattern more subtle behind text?
Lower the pattern opacity slider or choose two close colors. The output then uses an rgba() color for the pattern, so the background color shows through. Check text readability with a contrast checker after adding a pattern.
Can I animate a CSS pattern?
Yes. Animating background-position moves the pattern, for example from 0 0 to the tile size, which creates a seamless scrolling effect. Keep the animation slow and respect prefers-reduced-motion for visitors who dislike movement.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.
Related tools
CSS Gradient GeneratorDesign linear, radial and conic CSS gradients with draggable stops and export CSS or PNG.Seamless Pattern GeneratorMake seamless dot, stripe, wave, grid, zigzag and check patterns. Export CSS, SVG or PNG.CSS Shape Divider GeneratorCreate wave, tilt, curve and triangle section dividers and copy the SVG, HTML and CSS.CSS Box Shadow GeneratorDesign layered CSS box shadows with a live preview, presets and one-click Copy CSS.Normal Map GeneratorTurn a texture photo into normal, height, roughness and AO maps with a live 3D preview.Open Graph PreviewPaste OG tags and preview how links look on Facebook, X and LinkedIn.YouTube Embed Code GeneratorCreate responsive YouTube embed code with start time, autoplay, loop and privacy mode.CSS Border Radius GeneratorRound each corner, draw elliptical 8-value radii or random blob shapes and copy the CSS.CSS Button GeneratorDesign CSS buttons with gradients, borders, shadows and hover and active states, then copy the code.CSS Flexbox GeneratorBuild flexbox layouts visually: set container and item properties, then copy the CSS and HTML.Twitter Card GeneratorCreate X / Twitter Card meta tags with Open Graph fallbacks, character counters and a live preview.CSS Grid GeneratorDraw CSS grid layouts: set tracks and gaps, drag to name areas, then copy the CSS and HTML.PX to REM ConverterConvert px to rem or em and back, with a 1-100px table and a whole-CSS converter.Glassmorphism CSS GeneratorDesign frosted-glass UI cards with blur, transparency and border sliders, then copy the CSS.CSS Text Shadow GeneratorLayer CSS text shadows with a live preview and neon, 3D, outline and retro presets.HTML Editor (Live Preview)Write HTML, CSS and JavaScript and see a live, sandboxed preview as you type.HTML to JSX ConverterConvert HTML to valid React JSX: className, htmlFor, style objects, self-closing tags and events.CSS Clip-Path GeneratorDraw CSS clip-path shapes by dragging points: polygons, circle, ellipse and inset. Copy the CSS.CSS Animation GeneratorCreate CSS keyframe animations from 23 presets with live preview, timing controls and Copy CSS.CSS Triangle GeneratorMake CSS triangles in 8 directions with the border trick or clip-path. Set size and color, copy CSS.CSS Loader GeneratorPick from 14 pure CSS spinners and loaders, set color, size and speed, then copy the HTML and CSS.Cubic Bezier GeneratorDrag the control points to design a CSS easing curve, compare it with linear and copy cubic-bezier().CSS Filter GeneratorAdjust blur, brightness, contrast, hue, sepia and drop-shadow on an image and copy the CSS filter.CSS Specificity CalculatorCalculate CSS selector specificity (a, b, c), including :is(), :not(), :has() and :where(), and compare.Google Maps Embed GeneratorTurn an address or coordinates into responsive Google Maps iframe embed code, no API key.Neumorphism CSS GeneratorDesign soft UI neumorphic shapes with live preview and copy the box-shadow CSS.SVG Wave GeneratorMake layered SVG waves for section dividers and export SVG, PNG or a CSS background.SVG Blob GeneratorGenerate random organic SVG blob shapes with gradients and export SVG, PNG or CSS clip-path.CSS Clamp GeneratorTurn min/max sizes and viewport widths into a fluid CSS clamp() value in rem and vw.CSS @font-face GeneratorTurn font files or URLs into ready-to-paste @font-face rules with weights, styles and a preview.CSS Media Query GeneratorBuild @media rules for widths, orientation, dark mode and hover, or get framework breakpoints.CSS Scrollbar GeneratorStyle scrollbars: width, colors, radius and hover, with ::-webkit-scrollbar and scrollbar-color CSS.CSS Sprite GeneratorPack many icons into one sprite sheet PNG and get CSS classes with background-position.CSS Text Gradient GeneratorMake gradient text with background-clip:text: color stops, angle, font preview and fallback CSS.CSS Toggle Switch GeneratorDesign pure-CSS toggle switches: size, colors, shape and animation. Copy accessible HTML + CSS.CSS Tooltip GeneratorBuild pure CSS tooltips: position, arrow, colors, padding and animation. Copy HTML and CSS.HTML Form BuilderDrag and drop form fields with labels and validation, then copy accessible HTML and CSS code.Iframe GeneratorCreate iframe embed code: size or responsive ratio, border, allow, sandbox, lazy load, live preview.HTML Accessibility CheckerPaste HTML to find WCAG accessibility problems with impact level, the failing element and a fix.HTML Image Map GeneratorDraw clickable rectangle, circle and polygon hotspots on an image and get image map HTML.SVG ViewerOpen or paste SVG code to preview it live with zoom, backgrounds, size info and PNG export.Pathfinding VisualizerAnimate BFS, DFS, Dijkstra, A* and greedy search on a grid with walls, weights and mazes.PX to VW ConverterConvert pixels to vw and vh for any viewport size, and vw/vh back to px, with breakpoint tables.SVG Path EditorEdit an SVG path d attribute visually: drag points, edit commands, convert, scale and minify.SVG to CSS Data URITurn SVG code into a small URL-encoded data URI for CSS backgrounds, with Base64 size comparison.SVG to JSXTurn SVG code into a clean React component: camelCase attributes, style objects, TypeScript.Tailwind CSS Cheat SheetSearchable Tailwind class to CSS reference with live previews, class decoder and color palette.Web App Manifest GeneratorCreate a PWA manifest.json and every app icon size from one image, downloaded as a ZIP.CSS Color Filter GeneratorTurn a HEX color into a CSS filter that recolors black icons and SVGs, with an accuracy score.CSS Gradient Animation GeneratorCreate animated gradient backgrounds: pick colors, angle and speed, preview live and copy the CSS.CSS Hover Effects GeneratorPick button, link and image hover effects, tweak colors and timing, and copy the HTML and CSS.CSS InlinerMove CSS from style blocks into inline style attributes so HTML emails render in every client.CSS Transform GeneratorRotate, scale, skew and translate an element with sliders and copy the CSS transform code.Font Pairing ToolPreview Google Font heading and body pairs on real layouts and copy the embed code and CSS.