# Conic Glow

> A soft, blurred conic gradient turning slowly behind your content, like light moving round a room.

Category: Backgrounds · Free · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/conic-glow

## When to use it

Calm hero sections, sign-up pages and feature intros, where colour should move without drawing attention.

## How it works

A circle much larger than the area holds a conic gradient that sweeps through your three colours, heavily blurred so its edges never show, and turns on a slow linear loop. A radial gradient keeps the middle dark, so content stays readable while the colour moves round the edges. It's CSS and a transform, so it costs almost nothing.

## Installation

```bash
npx shadcn@latest add https://motionkitui.com/r/conic-glow.json
```

Or copy `components/motionkit/conic-glow.tsx` below. Requires react, motion and Tailwind CSS v4.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors` | `[string, string, string]` | `["#0E7C86", "#A56D5B", "#5FAEB4"]` | Three colours swept round the glow. |
| `duration` | `number` | `24` | Seconds per full turn. |
| `intensity` | `number` | `0.55` | Strength of the glow, 0 to 1. |
| `children` | `ReactNode` |  | Your content, layered above. |

## Accessibility

- **Keyboard: Not applicable.** Decorative, nothing to focus.
- **Screen readers: Pass.** Both layers are hidden from assistive tech; only your content is read.
- **Reduced motion: Pass.** With reduced motion on, the glow holds still.
- **Colour contrast: Pass.** A dark centre keeps ivory text at 15.3:1 even when the brightest colour turns behind it.

## Source

```tsx
"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

type ConicGlowProps = {
  children?: ReactNode;
  /** Three colours swept round the glow. */
  colors?: [string, string, string];
  /** Seconds per full turn. */
  duration?: number;
  /** Strength of the glow, 0 to 1. */
  intensity?: number;
  className?: string;
};

/** A soft, blurred conic gradient turning slowly behind your content, like light moving round a room. */
export function ConicGlow({ children, colors = ["#0E7C86", "#A56D5B", "#5FAEB4"], duration = 24, intensity = 0.55, className = "" }: ConicGlowProps) {
  const reduceMotion = useReducedMotion();
  return (
    <div className={`relative isolate overflow-hidden bg-[#0C1010] ${className}`}>
      {/* oversized and blurred, so the turning edges never show; only the middle colour wash is visible */}
      <motion.div
        aria-hidden
        className="absolute left-1/2 top-1/2 -z-10 aspect-square w-[160%] -translate-x-1/2 -translate-y-1/2 rounded-full blur-3xl"
        style={{ background: `conic-gradient(from 0deg, ${colors[0]}, ${colors[1]}, ${colors[2]}, ${colors[0]})`, opacity: intensity }}
        animate={reduceMotion ? undefined : { rotate: 360 }}
        transition={{ duration, repeat: Infinity, ease: "linear" }}
      />
      {/* a dark centre keeps text readable while the colour moves round the edges */}
      <div aria-hidden className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_center,rgb(12_16_16/0.85),rgb(12_16_16/0.35)_60%,transparent)]" />
      {children}
    </div>
  );
}
```