Gradient

Use Canvas gradient as a background. The optional stylesheet provides the --gradient-canvas CSS variable.

Preview

Light

Dark

Direction

The gradient runs from the top left to the bottom right. Its angle changes with the container's aspect ratio. Use the variable directly to keep this direction at any size.

Apply styles

Import the base tokens and gradient-canvas.css, then set background-image to var(--gradient-canvas).

@import '@mbsw/tokens/styles.css';
@import '@mbsw/tokens/gradient-canvas.css';

.canvas {
  min-height: 240px;
  background-image: var(--gradient-canvas);
}

Add .dark to the element or one of its ancestors to use the dark gradient. See Theme and styles for theme setup.