Checkerboard Pattern

Quick implementation

/* Modern Conic Gradient Approach */
.checkerboard {
  --c1: oklch(0.95 0.02 240);
  --c2: oklch(0.75 0.1 240);
  background: repeating-conic-gradient(
    from 45deg at 50% 50%,
    var(--c1) 0 25%,
    var(--c2) 25% 50%,
    var(--c1) 50% 75%,
    var(--c2) 75% 100%
  );
}

/* Fallback: Repeating Linear Gradient (Grid style) */
/* 
.checkerboard {
  background: repeating-linear-gradient(
    45deg,
    var(--c1),
    var(--c1) 10px,
    var(--c2) 10px,
    var(--c2) 20px
  );
} 
*/

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

Act as a senior CSS developer. Create a CSS-only checkerboard pattern component.

Requirements:
1. Use CSS variables for colors (oklch format).
2. Implement using `repeating-conic-gradient` for a radial checkerboard effect.
3. Provide a fallback using `repeating-linear-gradient` for a grid checkerboard effect.
4. Ensure the pattern is responsive and fills the container.
5. No images, no SVGs, no JavaScript.
6. Include comments explaining the gradient stops.

Why this matters in 2026

In an era of high-performance web standards, generating patterns with CSS gradients eliminates the need for heavy image assets. This reduces HTTP requests and improves Core Web Vitals, specifically LCP and CLS, while maintaining crisp visuals at any resolution.

The logic

The repeating-conic-gradient function creates a gradient that rotates around a center point. By defining specific color stops at 25%, 50%, 75%, and 100%, we create four quadrants. Repeating this pattern creates the checkerboard effect. The from 45deg argument rotates the starting point to align the squares diagonally.

Accessibility & performance

Ensure sufficient contrast between the two color variables (--c1 and --c2) to meet WCAG AA standards. While gradients are generally performant, complex repeating gradients can impact rendering performance on low-end devices. Use will-change: background sparingly if animating.