Learn by doing

CSS Background

Basics: layers + base color

The one rule to remember: backgrounds are layered images, and color sits underneath.

Continue the full explanation in Essentials.

background-image: url("/favicon.svg");
background-position: center;
background-size: 80px 80px;
background-repeat: no-repeat;
background-color: var(--ui-color-primary-100); /* default: transparent */

background: url("/favicon.svg") center / 96px no-repeat, var(--ui-color-primary-100);
/*
* Note: background-blend-mode cannot be expressed in the background shorthand.
*/

Gradient families at a glance

Use linear, radial, and conic gradients as image layers in the same background stack.

Deep dive: Gradients · Practice live: Editor

90°

Click the arrows for direction. Drag the handle to set angle.

background: linear-gradient(to right in oklch, #f59e0b, #06b6d4 66%, #6366f1);

50% · 50%

Drag the handle to move the center (percent only).

background: radial-gradient(circle in oklch, #f59e0b, #06b6d4 66%, #6366f1);

50% · 50%

180°

Drag the center or angle handle (percent-only positions).

background: conic-gradient(from 180deg in oklch, #f59e0b, #06b6d4 66%, #6366f1);

Blend multiple layers intentionally

Comma-separated layers can be blended for richer effects with controlled contrast.

Learn the rules: Blending & compositing · Apply now: Editor

background:
  radial-gradient(100% 70% at 50% 104%, transparent 50%, 80%, var(--ui-bg) 95%),
  repeating-radial-gradient(circle at 50% 70%, transparent, 8px, var(--ui-bg-accented) 0 10px),
  conic-gradient(from 180deg at 50% 70%, #fff0, #eec32d, #ec4b4b, #709ab9, #4dffbf, #fff0);
background-blend-mode: normal, overlay, normal;

Continue exploring

Guide for understanding · Editor for iteration · Generator for speed

Build fundamentals

Learn layering, shorthand, and painting order step by step.

Start Guide →

Practice interactively

Edit layered backgrounds, test blend modes, and export quickly.

Open Editor →

Generate fast

Create mesh and texture backgrounds, then refine in the editor.

Try Generators →