Striped Backgrounds

Learn how to create striped backgrounds using TailwindCSS `bg-*` utility and theme variables

The bg-* utility in TailwindCSS allows you to create custom backgrounds using arbitrary values. When combined with theme variables, you can create beautiful striped patterns that adapt to your design system.

Basic Usage

Create diagonal stripes using theme colors:

<div class="bg-[repeating-linear-gradient(-45deg,var(--color-gray-200),var(--color-gray-200)_1px,transparent_1px,transparent_6px)]"></div>

Background Utility Breakdown

The striped background is created using TailwindCSS’s arbitrary value syntax with CSS linear gradient:

bg-[repeating-linear-gradient(
    -45deg,                      /* Direction: diagonal stripes */
    var(--color-gray-200),      /* Color start: theme gray */
    var(--color-gray-200) 1px,  /* Stripe width: 1px */
    transparent 1px,            /* Gap start */
    transparent 6px             /* Pattern repeats every 6px */
)]

Components:

bg-[...]: Arbitrary value for background property
repeating-linear-gradient(): CSS function for repeating patterns
-45deg: Creates diagonal stripes (change for different angles)
var(--color-gray-200): TailwindCSS v4 theme color variable
_1px: Underscore replaces space in arbitrary values
transparent: Creates gaps between stripes
6px: Pattern repeats every 6px

<div class="bg-[repeating-linear-gradient(-45deg,var(--color-gray-200),var(--color-gray-200)_1px,transparent_1px,transparent_6px)]"></div>

Pattern breakdown:

var(--color-gray-200): Theme color variable used for the stripe color.
var(--color-gray-200)_1px: Defines the width of the stripe as 1px.
transparent_1px: Creates a transparent gap starting at 1px.
transparent_6px: The pattern repeats every 6px, creating the striped effect.

Variations

Different Angles

<!-- Horizontal stripes -->
<div class="bg-[repeating-linear-gradient(0deg,var(--color-gray-200),var(--color-gray-200)_1px,transparent_1px,transparent_6px)]"></div>

<!-- Diagonal stripes (45deg) -->
<div class="bg-[repeating-linear-gradient(45deg,var(--color-gray-200),var(--color-gray-200)_1px,transparent_1px,transparent_6px)] border-y"></div>

<!-- Vertical stripes -->
<div class="bg-[repeating-linear-gradient(90deg,var(--color-gray-200),var(--color-gray-200)_1px,transparent_1px,transparent_6px)] border-y"></div>

Dark Mode Support

Use dark mode utilities to adjust stripe colors dynamically:

<div class="w-full h-6 border-y border-(--stripes-color) bg-[repeating-linear-gradient(-45deg,var(--stripes-color),var(--stripes-color)_1px,transparent_1px,transparent_6px)] [--stripes-color:var(--color-gray-200)] dark:[--stripes-color:var(--color-gray-800)]"></div>

Explanation

CSS Variables: The --stripes-color variable is used to define the stripe color.
Light Mode: In light mode, --stripes-color is set to var(--color-gray-200).
Dark Mode: In dark mode, --stripes-color is set to var(--color-gray-800) using the dark: variant.

By using CSS variables, you can easily switch between light and dark mode without having to recreate the entire gradient. This approach ensures consistency and reduces redundancy in your styles.

Conclusion

Creating striped backgrounds in TailwindCSS is simple and versatile. By combining arbitrary values with theme colors and CSS gradients, you can design unique patterns that adapt to your design system. Experiment with different angles, colors, and stripe widths to create custom backgrounds that enhance your UI components.

On this page