Background Builder

v1.0

Generate advanced Tailwind CSS background classes for your Next.js projects. Supports solid colors, complex gradients (linear, radial, conic), and image composition.

Angle (90°)

Color Stops

Pos: 0%

Pos: 100%

Tailwind Class

bg-[linear-gradient(90deg,#3b82f6_0%,#9333ea_100%)]

Preview Mode

Example Usage:<div class="bg-[linear-gradient(90deg,#3b82f6_0%,#9333ea_100%)]">Content</div>

Arbitrary Values

This tool uses Tailwind's JIT arbitrary values (e.g. bg-[linear-gradient(...)]) to provide exact pixel-perfect control over gradients that standard utility classes cannot match.

Image Handling

For images, ensure your tailwind.config.js is set up correctly if you are using local assets, or use absolute URLs for external resources.

Integration

Simply copy the generated class string and paste it into your className prop. Requires Tailwind CSS v3.0+.