Professional-grade background patterns and gradients. Preview, copy, and integrate beautiful patterns into your projects.
Radial gradient from white to purple starting from bottom
Rich violet from top - luxury feel for premium brands
Rich violet from bottom - luxury feel for premium brands
Sophisticated slate from top - clean and professional
Sophisticated slate from bottom - clean and professional
Browse 189+ professional CSS background patterns — gradients, geometric grids, dots, stripes, mesh, and more. Preview live, customise colours and filters, then copy the ready-to-use CSS code in one click. No sign-up. No image files. Pure CSS.
A CSS pattern library is a curated collection of background styles — repeating patterns, gradients, meshes, and textures — implemented entirely in CSS without any image files. Every pattern in this library is generated using CSS properties like background-image, background-size, linear-gradient(), radial-gradient(), and conic-gradient(), making them infinitely scalable, fast to load, and instantly customisable.
Unlike PNG or SVG background images, CSS-only patterns add zero HTTP requests to your page, scale perfectly on every screen density including Retina and 4K displays, and can be changed at any time by editing a single colour value. They are ideal for hero sections, card backgrounds, section dividers, loading screens, and any element that needs visual depth without adding image file overhead.
This library goes beyond simple copy-paste by offering a live customisation panel with colour pickers, CSS filter sliders (opacity, blur, brightness, contrast, hue rotation, saturation), transform controls (scale, rotation, position), pattern size adjustment, and CSS blend mode selection. Customise in real time, then copy the generated code that reflects every change you made.
filter properties to the pattern element — useful for softening a pattern, creating frosted-glass effects, or matching a specific visual tone.background-size) and CSS blend mode selection. Blend modes like Multiply, Screen, Overlay, and Soft Light let you layer patterns over coloured backgrounds for sophisticated composite effects.<div> element with the pattern as an absolute-positioned background layer and a placeholder for your content. Drop it into any React, Next.js, Vue, or plain HTML project and it works immediately.Patterns are organised into categories so you can quickly find the right visual style for your project. Here's what each category contains:
Smooth colour transitions using linear-gradient(), radial-gradient(), and conic-gradient(). Includes two-tone, multi-stop, diagonal, radial burst, and mesh gradient styles. The most universally applicable category — works beautifully on hero sections, buttons, and card backgrounds.
Repeating geometric shapes including squares, triangles, hexagons, diamonds, and chevrons. Created with CSS gradients at precise angles to produce clean, hard-edged geometric repeating patterns. Popular in tech, fintech, and SaaS design aesthetics.
Polka dot patterns, radial dot grids, and concentric circle patterns of varying densities. Created with radial-gradient() and background-size to control dot size and spacing. Used extensively in card backgrounds, section breaks, and decorative overlays.
Horizontal, vertical, diagonal, and crosshatch striped patterns. Ranging from thin hairlines to bold stripes. Configurable density and angle. Classic choice for pricing tables, testimonial backgrounds, and visual texture on neutral surfaces.
Graph paper grids, blueprint grids, mesh patterns, and lattice designs. Created by layering multiple CSS gradients at right angles. Ideal for developer tools, dashboards, whiteboards, and any interface that needs a technical or structured aesthetic.
Subtle noise overlays, grain textures, and organic patterns that add tactile depth to flat surfaces. These patterns soften the sterile look of flat design and are widely used in modern Scandinavian-influenced UI styles.
Flowing wave patterns, organic curves, and sinusoidal repeating backgrounds created with CSS gradients. Gives a softer, more playful feel compared to geometric patterns. Popular in wellness, lifestyle, and consumer product interfaces.
Houndstooth, plaid, tartan, denim, and other textile-inspired patterns. Recreated in pure CSS. Adds personality and nostalgia to creative projects, portfolios, fashion brands, and entertainment platforms.
| Attribute | CSS Pattern | PNG / JPEG Image | SVG Pattern |
|---|---|---|---|
| File size | 0 bytes (no file) | 10–500 KB | 1–20 KB |
| HTTP requests | Zero — inline CSS | 1 per image | 1 per file |
| Retina / 4K quality | ✓ Perfect at any DPI | May be blurry | ✓ Scalable |
| Colour customisation | Edit one CSS value | Requires design tool | Edit SVG fill |
| Animation support | ✓ CSS transitions | ✗ Not directly | ✓ SMIL/CSS |
| Browser support | ✓ All modern browsers | ✓ Universal | ✓ Universal |
| Dark mode adapt | ✓ CSS variables | ✗ Requires second file | ✓ CSS variables |
| JavaScript required | ✗ None needed | ✗ None needed | ✗ None needed |
| ATS / CMS friendly | ✓ Inline or class | Requires asset pipeline | Requires embed |
CSS patterns are the clear winner for web performance, responsiveness, and maintainability. The only advantage images have is photographic detail — which CSS gradients can't replicate. For all geometric, abstract, and decorative backgrounds, CSS is the right choice.
Every pattern in this library is delivered as ready-to-use CSS that works in any modern web stack. Here are the four ways to integrate a copied pattern:
The copied JSX snippet uses an inline style prop on a <div> element. Paste it directly into any React component. The pattern layer is absolutely positioned, so wrap it in a relative container.
<div className="relative min-h-screen">
{/* Pattern background */}
<div
className="absolute inset-0 z-0"
style={{
background: "radial-gradient(#6366f1 1px, transparent 1px)",
backgroundSize: "24px 24px",
}}
/>
{/* Your content above the pattern */}
<div className="relative z-10">
<h1>Hello World</h1>
</div>
</div>If using the "Copy CSS Only" option, paste the CSS properties into your stylesheet under a class selector. Reference the class in your HTML or JSX.
.hero-pattern {
background: radial-gradient(#6366f1 1px, transparent 1px);
background-size: 24px 24px;
min-height: 100vh;
}
/* In your HTML: */
<div class="hero-pattern">
<!-- content -->
</div>For simple single-gradient patterns, use Tailwind's arbitrary value syntax. For complex multi-gradient patterns, use a CSS class or CSS custom property instead.
{/* Simple dot pattern via Tailwind arbitrary value */}
<div
className="min-h-screen [background:radial-gradient(#6366f1_1px,transparent_1px)] [background-size:24px_24px]"
>
{/* content */}
</div>To make a pattern adapt to dark mode, define the colours as CSS custom properties and update them in a [data-theme="dark"] or .dark selector.
:root {
--pattern-color: #6366f1;
--pattern-bg: #ffffff;
}
.dark {
--pattern-color: #818cf8;
--pattern-bg: #0f172a;
}
.hero-pattern {
background:
radial-gradient(var(--pattern-color) 1px, var(--pattern-bg) 1px);
background-size: 24px 24px;
}A subtle dot grid, diagonal stripe, or mesh gradient in the hero section instantly adds visual depth without competing with your headline or CTA. Keep opacity low (10–25%) for best results on light backgrounds.
Differentiate feature cards, pricing tiers, testimonial blocks, and stat counters with unique background patterns. A subtle geometric pattern makes otherwise identical cards feel distinct and premium.
Use a stripe or wave pattern to visually separate long-form landing page sections. A single 80px tall pattern strip between sections provides clear visual hierarchy without a heavy border.
Grid patterns (graph paper, isometric grid) are a designer favourite for SaaS dashboards, admin panels, and developer tools. They reinforce the technical, structured aesthetic of data-heavy interfaces.
Add a subtle noise texture or gradient mesh behind modal content to make dialogs feel elevated and layered rather than flat. Combine with a backdrop blur for a modern glassmorphism effect.
Animated CSS patterns (use CSS animation on hue-rotate or backgroundPosition) create engaging loading screens with zero image assets. Skeleton loaders with a shimmer stripe pattern improve perceived performance.
Many email clients support CSS background-image gradients. Use linear-gradient patterns in email header banners for branded, visually rich email templates that don't require hosted image files.
CSS gradients render cleanly in browser print stylesheets and wkhtmltopdf / Puppeteer PDF generation. Use subtle grid or stripe patterns on certificate templates, invoices, and report headers.
Most patterns in this library are built with one or more of these CSS gradient functions. Understanding them helps you further customise the copied code:
| Function | What It Does | Best For |
|---|---|---|
| linear-gradient() | Creates a straight-line colour transition at any angle | Stripes, diagonal patterns, simple two-tone backgrounds |
| radial-gradient() | Creates a circular or elliptical colour radiation | Dot patterns, spotlight effects, radial burst backgrounds |
| conic-gradient() | Creates a colour transition that rotates around a centre point | Pie-chart patterns, colour wheel effects, angular geometric designs |
| repeating-linear-gradient() | Same as linear-gradient() but tiles seamlessly | Striped patterns, hatch marks, crosshatch grids |
| repeating-radial-gradient() | Same as radial-gradient() but tiles in concentric rings | Polka dots, target patterns, ripple effects |
| repeating-conic-gradient() | Same as conic-gradient() but tiles rotationally | Checkerboard patterns, pinwheel designs, colour segments |
Primary Color — Replaces the main pattern colour (default indigo #6366f1). Affects the foreground colour of dots, lines, and shapes.
Secondary Color — Replaces the background/fill colour (default white #ffffff).
Saturation — Scales colour intensity from greyscale (0%) to vivid (200%).
Hue Shift — Rotates the entire hue wheel (0°–360°), shifting every colour in the pattern simultaneously without manual hex editing.
Applies CSS filter properties to the pattern layer. Opacity (0–100%) controls transparency. Blur (0–20px) softens the pattern — ideal for creating frosted background effects. Brightness and Contrast (0–200%) adjust the luminance and tonal range.
Scale (50–200%) zooms the pattern in or out. Rotation (0–360°) rotates the entire pattern — turn a horizontal stripe into a diagonal with 45°. Position X/Y shifts the background origin point, useful for aligning patterns with design elements.
Pattern Size (25–400%) is equivalent to CSS background-size — scale the tile size independently of the viewport. Blend Mode applies a CSS mix-blend-mode to the pattern layer: Multiply, Screen, Overlay, Soft Light, Hard Light, Color Dodge, Color Burn, Darken, Lighten, Difference, Exclusion.
Geometric, gradient, dot, stripe, grid, mesh, noise, wave, and retro patterns — all built with pure CSS and zero external dependencies.
Every slider and colour picker updates the pattern preview instantly. No page reloads, no compile steps — see your changes the moment you make them.
Copy your fully customised JSX snippet, the original unmodified pattern code, or just the raw CSS property declarations — whichever format your workflow requires.
Star any pattern to save it to favourites. Saved in browser localStorage — your favourites persist across sessions without requiring an account or server.
Apply CSS filter() transformations to any pattern to create soft, dark, high-contrast, or frosted-glass variants without touching the source gradient code.
12 CSS mix-blend-mode options let you layer patterns over coloured backgrounds for sophisticated compositing effects that would previously require a design tool.
The pattern grid, preview modal, and customisation panel all adapt to any screen size. Preview and copy patterns on a phone as easily as a desktop.
Generated code uses only CSS properties. No npm packages, no JavaScript libraries, no Tailwind plugins required. Drop the code into React, Vue, Angular, plain HTML, or any framework.
Yes. All patterns in this library are pure CSS implementations that you write into your own codebase. There are no licensing fees, attribution requirements, or usage restrictions. Use them freely in personal projects, commercial products, client work, and open source libraries.
All patterns use CSS gradient functions that are supported in Chrome, Firefox, Safari, Edge, and Opera at their current versions. The conic-gradient() function requires Chrome 69+, Firefox 83+, and Safari 12.1+. Older IE versions are not supported, but IE has been end-of-life since 2022.
CSS patterns add zero bytes to your page weight, require no HTTP requests, scale perfectly on any display resolution, can be changed with a single value edit, support CSS animations and transitions, and adapt to dark mode via CSS custom properties. For geometric and abstract backgrounds, CSS is always the better technical choice over image files.
Yes. CSS gradient backgrounds can be animated using CSS animations or transitions on properties like background-position, background-size, hue-rotate (via filter), and opacity. A common technique is animating backgroundPosition to create a scrolling pattern, or using hue-rotate to cycle through colours. The customised code from this tool provides the base CSS you then add animations to.
mix-blend-mode is a CSS property that controls how an element's content blends with what's behind it — similar to layer blend modes in Photoshop. Multiply darkens the layer (good for texture overlays), Screen lightens (good for light leaks), Overlay adds contrast, and Soft Light gives a subtle depth effect. Use blend modes when you want a pattern to interact with a coloured background rather than fully covering it.
Replace fixed colour values with CSS custom properties (variables). Define the light-mode colours in :root and override them in a .dark selector. When the user's system theme or your app's theme switches, the custom properties update automatically and the pattern colours change with them. The transform and filter controls in this tool also let you create a lighter/darker variant of any pattern.
CSS linear-gradient and repeating-linear-gradient are supported in most modern email clients (Apple Mail, Gmail web, Outlook 2019+, Yahoo Mail). Radial and conic gradients have more limited email client support. Test in Litmus or Email on Acid before deploying. Stick to simple linear patterns for the broadest email client compatibility.
Three techniques work well: (1) Reduce the primary colour opacity — use rgba(99, 102, 241, 0.08) instead of #6366f1 for a very subtle 8% opacity dot. (2) Use the Opacity slider in the Filters tab to reduce the entire pattern's visibility. (3) Choose a background colour very close to the pattern colour (e.g., white dots on a very light grey background). Subtle patterns should be felt more than seen — they add texture without demanding attention.
Discover more free developer tools that might interest you
Explore palettes, tints, and shades for your UI
Build and preview CSS animations
Estimate the size of your JavaScript bundles
Generate favicons for your website
Preview how screen readers interpret your HTML
Format and validate JSON data