Tailkits
ComponentsFree · Copy & paste

Tailwind CSS Background Patterns & Snippets

131 ready-to-use Tailwind CSS background patterns: dots, grids, gradients, radial glows, and masked spotlights. Click any pattern to preview it full-screen, then copy the class in one click.

Tailwind v3 & v4 compatible Light & dark variants No JS required MIT licensed
New
Blue Dot Griddots
New
Grid with Emerald Spotlightgrid
New
Grid with Rose Spotlightgrid
New
Emerald Soft Gradientgradient
New
Violet Soft Gradientgradient
New
Blue Ellipse Topradial
New
Rose Center Washradial
New
Blue Glow Orbglow
New
Masked Rose Dotsmask
New
Aurora Dream Corner Whispersgradient
New
Aurora Dream Soft Harmonygradient
New
Aurora Dream Diagonal Flowgradient
New
Aurora Dream Vivid Bloomgradient
New
Dreamy Sky Pink Glowglow
New
Peachy Mint Dreamgradient
New
Soft Pastel Dreamgradient
New
Dreamy Sunset Gradientgradient
New
Soft Morning Mistgradient
Tailkits UI · Premium assets

40+ ready-to-use background images

When a CSS pattern isn't enough, reach for a background image. Tailkits UI ships 40+ hand-designed assets: abstract mains, line grids, linear gradients, fades, and overlay textures. Drop-in via a single <img> tag behind any section.

Background 01 Tailkits UI background
Background 01Main
Background 02 Tailkits UI background
Background 02Main
Background 05 Tailkits UI background
Background 05Main
Background 08 Tailkits UI background
Background 08Main
Background 10 Tailkits UI background
Background 10Main
Background 13 Tailkits UI background
Background 13Main
Line Pattern 01 Tailkits UI background
Line Pattern 01Lines
Line Pattern 03 Tailkits UI background
Line Pattern 03Lines
Linear Gradient 01 Tailkits UI background
Linear Gradient 01Gradient
Linear Gradient 06 Tailkits UI background
Linear Gradient 06Gradient
Fade 01 Tailkits UI background
Fade 01Fade
Browse all 40+ backgrounds

See the full catalog inside Tailkits UI: lines, linear gradients, fades, overlays, and more.

Explore Tailkits UI
How to use

Drop the image behind any section with absolute inset-0 -z-10 object-cover and put your content in a relative wrapper on top. 

<section class="relative overflow-hidden isolate">
  <img
    class="absolute inset-0 -z-10 h-full w-full object-cover"
    src="https://tailkits.com/ui/iframe/assets/img/bg-2.png"
    alt="Background"
  />
  <div class="relative mx-auto max-w-7xl px-4 py-24">
    <!-- Your content -->
  </div>
</section>

What are Tailwind background snippets?

Tailwind background snippets are short, single-element CSS backgrounds expressed as Tailwind utility classes: bg-[radial-gradient(...)], bg-gradient-to-r, [background-size:...] and friends. No images. No extra files. Just classes you paste onto a <div> behind your hero, section, or card.

The 131 patterns on this page cover the styles you need for a modern landing page: dot grids for docs sites and dashboards, linear grids for SaaS heroes, radial gradients and spotlights for product launches, soft gradient washes for editorial pages, blurred glow orbs for dark-mode marketing sites, and masked variants that fade the pattern out where it would fight with your content.

Why background patterns matter in web design

Backgrounds are more than filler; they're a foundational element of every landing page. A good one sets the tone before the headline even loads, and a bad one fights your copy and tanks readability. Four reasons to pay attention:

Setting the mood and tone
A background sets the emotional tone of your site instantly. A soft gradient reads as friendly and editorial; a dark spotlight reads as serious and premium. Match the pattern to the feeling you want visitors to walk away with.
Readability and focus
A well-chosen background creates hierarchy, drawing attention to the headline and CTA while framing the rest. That's why the masked patterns on this page fade out where your copy sits: texture on the edges, calm in the middle.
Brand identity
Consistent backgrounds and color treatments reinforce your brand. Pick one or two patterns from this collection and reuse them across your hero, feature, and CTA sections. Repetition is what makes a visual system feel deliberate.
Speeding up development
Designing a custom background from scratch (picking colors, tuning stops, testing in dark mode) can burn half a day. Copy a snippet from here, tweak two values, and move on to the work that differentiates your product.

Which pattern should you pick?

Pick the category that matches the page, not the one that looks coolest on its own. Here's a cheatsheet.

If the page is… Reach for…
SaaS landing heroGrid + spotlight mask. Draws the eye to the headline without fighting it.
Dark-mode product launchSlate base with a soft colored glow in one corner.
Docs / dashboard shellLow-contrast dot grid. Adds texture without distracting from dense UI.
Editorial / blog heroSoft gradient wash. Warm, friendly, and easy to read over.
Marketing feature sectionSingle-color radial orb. Cheap to render, easy to theme.
Conversion / CTA bannerDark spotlight or dome. Concentrates attention on the button.

Anatomy of a pattern

Most snippets here are one of four shapes. Once you recognize them, you can modify colors and sizes without breaking anything.

Radial dots

dots

A single repeating radial gradient paints a 1px dot, then background-size controls spacing. Everything outside the dot is transparent.

bg-[radial-gradient(#e5e7eb_1px,transparent_1px)]
[background-size:16px_16px]

Customize: Change #e5e7eb to tint the dots. Increase 16px for a sparser grid; decrease for denser.

Linear grid

grid

Two linear gradients cross each other (one vertical, one horizontal), each drawing a 1px line, then tiled with bg-[size:...].

bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),
    linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)]
bg-[size:6rem_4rem]

Customize: Shrink bg-[size:...] for a tighter grid. Swap #f0f0f0 for a tinted grid line.

Radial spotlight

radial

A single radial gradient with an elliptical stop. Placed inside an absolute-positioned child so the parent still owns its own background color.

bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,
    rgba(120,119,198,0.3),
    rgba(255,255,255,0))]

Customize: Change the at_x_y origin to move the spotlight. Lower the alpha for a subtler glow.

Blurred glow orb

glow

A hard-edged circle placed off-screen, then softened with blur-[80px] and opacity. Cheap, painterly light source.

absolute h-[500px] w-[500px] rounded-full
bg-[rgba(173,109,244,0.5)] opacity-50 blur-[80px]

Customize: Change the rgba() for any accent color. Increase blur for softer, decrease for more distinct.

Combining patterns with masks

The best-looking backgrounds are often two patterns layered: a repeating base (grid or dots) plus a soft spotlight that fades the pattern out where your copy sits. That's what the masked category here does. The trick is the mask-image property: 

<div class="relative h-full w-full bg-slate-950">
  <div class="absolute inset-0
    bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),
        linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)]
    bg-[size:14px_24px]
    [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]">
  </div>
</div>

The outer element paints the base color. The inner element paints the grid, then the mask-image radial gradient erases it anywhere outside the ellipse. Swap the mask shape to move the "spotlight" to wherever your content is.

How to use these in your project

  1. Find a pattern above that matches your page's tone. Open the preview to see it at full size with a real hero on top.
  2. Click Copy class for the raw Tailwind classes, or Copy HTML inside the preview to grab the full markup including a sample hero.
  3. Paste the class onto a <div> positioned behind your content (usually absolute inset-0 -z-10 inside a relative parent).
  4. Patterns that use [&>div] selectors layer a second effect on a child <div></div>. Keep that empty child element in the markup.
  5. Tweak colors, blur radius, or grid size directly in the arbitrary-value brackets. It all stays inside Tailwind.

Build the whole landing page, not just the background.

Tailkits UI gives your agent 200+ production-ready Tailwind components via MCP: heroes, features, pricing, testimonials, footers. Ship a complete page in an afternoon.

Explore Tailkits UI Browse more free components

FAQ

Frequently asked questions

Are these Tailwind background snippets free to use?

Yes. Every pattern on this page is free, MIT-licensed, and safe to use in personal and commercial projects. No attribution required. Copy the classes and paste them wherever you need them.

Do these work with Tailwind CSS v3 and v4?

Yes. The patterns use core Tailwind features (arbitrary values, bg-gradient utilities, and the child-selector variant [&>div]) that are supported in both Tailwind v3 and v4. No plugins required.

Why do some patterns have an empty <div></div> inside?

Patterns that use child selectors like [&>div]:absolute layer a second effect (a glow, a mask, a secondary gradient) onto a child element. The outer element paints the base color; the empty child paints the overlay. Keep the empty div in your markup for those patterns to render correctly.

How do I add a Tailwind background to a section?

Wrap your content in a relative container, then add a div with the pattern classes positioned absolute inset-0 -z-10 behind it. Your content sits above with z-10. The preview modal's 'Full Hero' tab gives you the exact markup you can paste.

Can I change the colors of these patterns?

Yes. Most patterns use arbitrary values like bg-[radial-gradient(...#hex...)] or bg-[rgba(...)]. Swap those color values directly in the class string. The 'Anatomy of a pattern' section on this page walks through exactly which values to change.

What's the difference between a mask and a regular background?

A regular background paints the pattern everywhere. A mask fades the pattern out in some areas, usually in the middle of your hero, so the pattern frames your content instead of competing with it. The masked patterns in this collection use CSS mask-image with a radial gradient.

Do I need JavaScript for these backgrounds?

No. Every pattern is pure CSS delivered through Tailwind's arbitrary-value classes. They render on the server, work without hydration, and don't affect Core Web Vitals.

How does Tailkits UI fit with these backgrounds?

Tailkits UI is a library of 200+ production-ready Tailwind components (heroes, features, pricing, CTAs, footers) available via MCP. These backgrounds pair well with it. Pick a pattern for the vibe, then drop a Tailkits UI hero on top to ship the whole page fast.

Can’t find the answer?

Contact us