How to add a gradient background in CSS

Copy a background

Use a gallery card’s CSS button, or open Export on a gradient details page and select CSS. Paste the complete copied rule into your stylesheet and apply its generated class to your element. Native gradients are drawn by the browser; textured designs reference one image. Give the element its own height or padding so the background has space to appear.

Use a reusable template

Copy stylesheet link from the details page and add it inside your HTML head. Copy class adds two classes: fg-gradient and the selected variation class. Keep the same stylesheet when switching variations within that template. A different template needs its own stylesheet link.

Keep the page lightweight

Load only the templates you use. The template stylesheet contains no fonts, scripts, animations or layout resets. Check your own page on a slow connection, especially when using textured image backgrounds.

A working starting point

This example shows the integration pattern. Use a gradient’s Copy CSS or Export controls for its actual artwork.

.hero {
  min-height: 24rem;
  padding: 3rem 1.5rem;
  background-color: #172554;
  background-image: linear-gradient(135deg, #172554, #6d28d9);
}
/* A simple CSS example. For a library design, replace the
   background declarations with the gradient’s Copy CSS output. */