Fading Grid Gradient Background

This Fading Grid Gradient Background creates a clean, architectural aesthetic suitable for SaaS landing pages or documentation sites. It features a technical vertical grid pattern that gently dissolves into a vibrant teal-and-purple gradient at the bottom. The effect mimics a “horizon” line, adding depth and structure to an otherwise flat page without using any images.

Core Technique

The visual complexity relies on stacked CSS gradients and CSS Masking.

1. The Base Layer (.container): Two gradients are applied to the background property.
   • Top Layer: A white-to-transparent vertical gradient. It keeps the top 40% of the screen solid white, blending the content seamlessly into a white header, before fading out to reveal the colors below.
   • Bottom Layer: A horizontal linear-gradient (Teal to Purple) that sits underneath and provides the main splash of color.
2. The Grid (::before): The vertical lines are generated using a repeating linear-gradient sized at 50px.
3. The Fade (mask-image): To prevent the grid from looking too harsh against the colored bottom, a CSS mask is applied to the pseudo-element. It makes the lines opaque at the top and fully transparent by the 70% mark, causing them to “vanish” into the gradient.

Customization

You can adjust the density of the grid lines and the intensity of the color bleed by modifying a few CSS properties.

.container {
  /* Change the underlying colors */
  background: 
    linear-gradient(to bottom, #fff 0%, #fff 40%, transparent 100%),
    linear-gradient(to right, #ff7e5f, #feb47b); /* Sunset vibe */
}

.container::before {
  /* Adjust grid line thickness and color */
  background-image: linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px);
  
  /* Change grid spacing (currently 50px) */
  background-size: 80px 100%; 
  
  /* Control where the grid fades out */
  mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
}

Tips

Content Contrast: Since the background shifts from white at the top to vibrant colors at the bottom, ensure your text color adapts. You might need dark text for the header/top section and white text for the footer/bottom section to maintain readability against the changing background luminance.