Skip to content
All 6 kits from $99 · Everything Bundle $149

Gradient Background

BackgroundsMIT
View in Storybook

Static gradient backgrounds in multiple presets — for hero sections and banners.

bun add @otfdashkit/ui

Preview

Gradient Background
Loading Storybook preview…

Code

import { GradientBackground } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="grid grid-cols-2 gap-0 h-screen">
      {(['slate', 'warm', 'cosmic', 'terminal'] as const).map((preset) => (
        <div key={preset} className="relative h-full min-h-[300px]">
          <GradientBackground preset={preset} />
          <div className="relative z-10 flex items-center justify-center h-full">
            <span className="text-white/90 text-lg font-semibold capitalize">{preset}</span>
          </div>
        </div>
      ))}
    </div>
  )
}

Free with the SDK. This pattern ships in @otfdashkit/ui under the MIT license.

Kit for this component

Landing templates$9 each

Add a gradient background behind a page or hero section.

See the kit

Props

Props declared in the GradientBackground source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
fixedbooleanfalseFull-screen fixed backdrop
gradientstringCustom gradient CSS string e.g. "radial-gradient(...)" — only when preset='custom'
noisebooleanfalseAdditional noise/texture overlay (subtle grain)
preset'slate' | 'warm' | 'cosmic' | 'terminal' | 'aurora' | 'custom' | 'subtle''slate'
radialbooleanfalseRadial spot blend on top