← Back to Blog

How to Create Gradient Backgrounds for Websites

A gradient background can elevate a website from plain to polished in seconds. Whether you are building a startup landing page, a personal portfolio, or an e-commerce storefront, the right gradient sets the mood and reinforces your brand identity. In this guide we will walk through everything you need to know — from basic CSS syntax to advanced mesh gradients and performance best practices.

CSS Gradient Basics

CSS natively supports three gradient functions: linear-gradient(), radial-gradient(), and conic-gradient(). Each accepts a direction or shape and a list of color stops. For example, a simple two-color linear gradient looks like this:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

This is fine for simple accents or dividers, but it rarely feels rich enough for a full-page background. Two colors along a single axis look flat and predictable.

Why Mesh Gradients Look Better

Mesh gradients solve the flatness problem by blending multiple color points in two dimensions. The result is a soft, organic background that feels alive, similar to an out-of-focus photograph or a watercolor wash. Because each color point has its own position and radius, the transitions are more complex and visually interesting than anything a single linear-gradient can produce.

On the web, mesh gradients are typically composed by layering several radial-gradient() values. Manually writing this CSS is tedious and error-prone. MeshGradient generates the code for you — drag the color points, adjust the palette, and copy the production-ready CSS with one click.

Step-by-Step: Create a Gradient Background with MeshGradient

1. Pick Your Colors

Open the MeshGradient editor and choose your palette. You can start from scratch, use the color harmony tool to generate a balanced set of colors, or browse the presets library for inspiration.

2. Position Your Color Points

Drag the control points around the canvas to control where each color appears. Spread them out for a gentle wash, or cluster them together for concentrated color bursts. You can also adjust the size of each point to control how far its color bleeds into the surrounding area.

3. Add Noise (Optional but Recommended)

A subtle grain or noise texture eliminates color banding and adds a tactile, printed-paper quality. MeshGradient offers four noise types — grain, simplex, scanlines, and dots — and lets you fine-tune intensity, scale, and blend mode. Even a tiny amount of grain at 5-10% intensity makes a noticeable difference.

4. Export

When you are happy with the result, hit the export button. You can copy the generated CSS directly into your stylesheet, or download the gradient as a PNG or JPG at resolutions up to 4K. For most websites the CSS export is ideal because it is resolution-independent, renders instantly, and adds zero bytes to your page weight.

Using the CSS in Your Project

Paste the exported CSS onto any container element. A common pattern is to apply it to the <body> or a full-screen <div>:

.hero {
  min-height: 100vh;
  /* paste MeshGradient CSS here */
}

Because the gradient is built from CSS radial-gradient() layers it scales perfectly to any viewport. No extra media queries are needed — the colors stretch and reflow with the container.

Responsive Considerations

  • CSS gradients are inherently responsive. They scale with the element, so a gradient that looks great on a 1440px desktop screen will also look great on a 375px phone.
  • If you export an image instead, make sure to use background-size: cover and background-position: center so the image fills the viewport without distortion.
  • Consider aspect ratio. A gradient that looks balanced in landscape may feel top-heavy in portrait. Test on multiple devices or use a CSS gradient which adapts automatically.

Performance Tips

  • Prefer CSS over images. A CSS gradient has zero network cost, while a 4K PNG can weigh 2-5 MB. Only use image exports when you need noise textures that CSS cannot reproduce.
  • Use WebP or AVIF if you must export an image. Both formats offer dramatically better compression than PNG.
  • Lazy-load below-the-fold images. If your gradient image is further down the page, use loading="lazy" to avoid blocking the initial render.
  • Limit the number of layers. Each color point adds another radial-gradient() layer. Five to seven points strike a good balance between richness and rendering speed.

Wrapping Up

Gradient backgrounds are one of the highest-impact, lowest-effort design improvements you can make to any website. With MeshGradient, the entire process — from choosing colors to exporting production-ready CSS — takes less than a minute. Give it a try and see the difference a great gradient can make.

Create beautiful mesh gradients with noise and grain effects — completely free.

Open MeshGradient