LoveCSS.comLoveCSS

CSS Background Generator

1. Background

deg
%
%
%
%
%
%

2. Layers

  • Background· gradient

Add layer

3. Selected Layer · Wave

%
%
%
px
Color

CSS Output

.background {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background-color: #eef2ff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0.5' x2='1' y2='0.5'%3E%3Cstop offset='0' stop-color='%23a78bfa'/%3E%3Cstop offset='1' stop-color='%23f472b6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' fill-opacity='0.8' d='M0,19.2 C24,19.2 66,31.8 90,42.3 C114,52.8 156,83.1 180,97.9 C204,112.8 246,143.1 270,153.6 C294,164.1 336,176.6 360,176.6 C384,176.6 426,164.1 450,153.6 C474,143.1 516,112.8 540,97.9 C564,83.1 606,52.8 630,42.3 C654,31.8 696,19.2 720,19.2 C744,19.2 786,31.8 810,42.3 C834,52.8 876,83.1 900,97.9 C924,112.8 966,143.1 990,153.6 C1014,164.1 1056,176.6 1080,176.6 C1104,176.6 1146,164.1 1170,153.6 C1194,143.1 1236,112.8 1260,97.9 C1284,83.1 1326,52.8 1350,42.3 C1374,31.8 1416,19.2 1440,19.2 L1440,320 L0,320 Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='456' height='456' viewBox='-26.7 -26.7 253.4 253.4'%3E%3Cdefs%3E%3ClinearGradient id='blob-fill' x1='0.146' y1='0.146' x2='0.854' y2='0.854'%3E%3Cstop offset='0%25' stop-color='%2393c5fd' /%3E%3Cstop offset='100%25' stop-color='%23c4b5fd' /%3E%3C/linearGradient%3E%3Cfilter id='blob-effects' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='6.7' /%3E%3C/filter%3E%3C/defs%3E%3Cpath fill='url(%23blob-fill)' opacity='0.7' filter='url(%23blob-effects)' d='M140,0 A60,140 0 0 1 200,140 A60,60 0 0 1 140,200 A140,140 0 0 1 0,60 A140,60 0 0 1 140,0 Z' /%3E%3C/svg%3E"),
    linear-gradient(135deg, #eef2ff 0%, #fce7f3 55%, #e0f2fe 100%);
  background-size:
    100% 30%,
    auto,
    auto;
  background-position:
    0 100%,
    85% 15%,
    0 0;
  background-repeat: no-repeat;
}

One element, no extra markup: every layer is part of the background stack. Download saves the composition as an SVG image.

Popular Background Presets

Examples

About CSS Background Generator

Create beautiful CSS backgrounds by combining gradients, waves, blobs, patterns, and shapes. Customize every layer visually and copy the generated CSS instantly.

How to Create a CSS Background

  1. 1Choose the base: a solid colour, a linear/radial/conic gradient, a mesh gradient or a pattern.
  2. 2Add layers — waves, blobs, patterns and simple shapes — from the Layers panel.
  3. 3Select a layer to adjust only its settings; drag layers (or use the arrows) to change their order, and hide layers to compare compositions.
  4. 4Preview it as a full page, hero, card or section, and add grain or blend modes under Advanced if you like.
  5. 5Copy the CSS — everything lives on a single element — or download the composition as an SVG.

Frequently Asked Questions

CSS lets one element have many background images, separated by commas — the first one is drawn on top. This generator builds that list for you, with a matching background-size, background-position and background-repeat for every layer.

No. Waves, blobs and shapes are embedded as small SVG images inside the CSS, and patterns and mesh gradients are pure CSS gradients, so the whole composition sits on a single element.

Yes — pick Gradient as the base and add a Pattern layer, or pick Pattern as the base and add gradient-filled waves or blobs on top. Lower the pattern's opacity for a subtle texture.

Waves stretch to the full width and keep their height as a percentage, patterns tile, and blobs and shapes are positioned in percentages, so the composition adapts to any screen size.

Each building block has its own dedicated LoveCSS tool — the Gradient, Mesh Gradient, Pattern, Wave and Blob generators — for detailed control. This generator focuses on combining them.

Related Tools

More free CSS generators you might like.

Gradient Generator

Create beautiful, animated CSS gradients visually.

Mesh Gradient Generator

Design vibrant mesh gradients visually.

CSS Pattern Generator

Create dots, grids, stripes and geometric backgrounds.

CSS Wave Generator

Create layered CSS wave backgrounds and section dividers.

CSS Blob Generator

Create organic CSS blob shapes for backgrounds and heroes.