Gradient

Diwa provides directional scrim gradients for placing legible text over images, plus a brand accent gradient. Always consume these tokens rather than composing raw gradients in component code.

Example

Gradient To Top

--diwa-gradient-to-top

Fade text over an image from bottom — scrim rises upward

Gradient To Bottom

--diwa-gradient-to-bottom

Fade text over an image from top — scrim falls downward

Gradient To Left

--diwa-gradient-to-left

Horizontal scrim fading leftward — side-panel overlays

Gradient To Right

--diwa-gradient-to-right

Horizontal scrim fading rightward — text-on-image banners

Accent

--diwa-gradient-accent

Brand CTA surfaces, loading bars, decorative accents

Token	Use
--diwa-gradient-to-top	Fade text over an image from bottom — scrim rises upward
--diwa-gradient-to-bottom	Fade text over an image from top — scrim falls downward
--diwa-gradient-to-left	Horizontal scrim fading leftward — side-panel overlays
--diwa-gradient-to-right	Horizontal scrim fading rightward — text-on-image banners
--diwa-gradient-accent	Brand CTA surfaces, loading bars, decorative accents

Usage

✓Use scrim gradients when placing text over images (e.g. link tiles, hero banners) to ensure legible contrast.
✓Choose the direction that matches the text position — gradient-to-top for bottom-anchored labels, gradient-to-right for left-edge text.
✓Use --diwa-gradient-accent for brand CTA surfaces and decorative accents.

Don't

✕Don't compose gradients from raw hex values — always use a defined token.
✕Don't use scrim gradients on plain coloured backgrounds where no image is present.
✕Don't use gradient-accent as a neutral background; it is a brand-intent surface only.

ℹ

Hint: The scrim gradients use multiple colour stops to produce a smooth, natural-looking fade rather than a harsh two-stop linear transition.

Styles

All gradient tokens are available as JS constants from @diwacopilot/components/styles:

import {
  gradientToTopStyle,
  gradientToBottomStyle,
  gradientToLeftStyle,
  gradientToRightStyle,
  gradientAccent,
} from '@diwacopilot/components/styles';

/* CSS */
.image-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--diwa-gradient-to-bottom);
}

.hero-cta {
  background: var(--diwa-gradient-accent);
  color: white;
}

@use '@diwacopilot/components/styles' as *;

.hero-cta {
  background: $diwa-gradient-accent;
  color: white;
}

.image-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: $diwa-gradient-to-bottom;
  pointer-events: none;
}

.fade-top { background: $diwa-gradient-to-top; }