UI Components Easy

Shine Border

Container with a glowing, shining animated border using a rotating gradient that creates a polished metallic edge effect.

Open in Lab

css javascript vue svelte

Targets: TS JS HTML React Vue Svelte

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  padding: 2rem;
}

/* --- Shine Border --- */
.shine-border {
  --shine-color-1: #22d3ee;
  --shine-color-2: #3b82f6;
  --shine-border-width: 2px;
  --shine-speed: 3s;
  --shine-radius: 1.25rem;

  position: relative;
  width: min(400px, calc(100vw - 2rem));
  border-radius: var(--shine-radius);
  overflow: hidden;
  padding: var(--shine-border-width);
  background: linear-gradient(
    var(--shine-angle, 0deg),
    var(--shine-color-1),
    transparent 40%,
    transparent 60%,
    var(--shine-color-2)
  );
  animation: shine-rotate var(--shine-speed) linear infinite;
}

.shine-border--purple {
  --shine-color-1: #a855f7;
  --shine-color-2: #ec4899;
}

@keyframes shine-rotate {
  0% {
    --shine-angle: 0deg;
  }
  100% {
    --shine-angle: 360deg;
  }
}

/* Fallback for browsers without @property */
@supports not (background: paint(something)) {
  .shine-border {
    background: conic-gradient(
      from 0deg,
      var(--shine-color-1),
      transparent 25%,
      transparent 50%,
      var(--shine-color-2),
      transparent 75%,
      var(--shine-color-1)
    );
    animation: shine-conic-rotate var(--shine-speed) linear infinite;
  }

  .shine-border::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: conic-gradient(
      from 0deg,
      var(--shine-color-1),
      transparent 25%,
      transparent 50%,
      var(--shine-color-2),
      transparent 75%,
      var(--shine-color-1)
    );
    animation: shine-conic-rotate var(--shine-speed) linear infinite;
    z-index: -1;
  }
}

@keyframes shine-conic-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Use @property for smooth angle transition where supported */
@property --shine-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* Inner content */
.shine-border__content {
  position: relative;
  z-index: 1;
  padding: 2rem;
  border-radius: calc(var(--shine-radius) - var(--shine-border-width));
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.shine-title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f1f5f9;
}

.shine-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #94a3b8;
}

.shine-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.shine-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.3);
  color: #22d3ee;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.shine-badge--purple {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.3);
  color: #a855f7;
}

.shine-btn {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(34, 211, 238, 0.4);
  background: rgba(34, 211, 238, 0.1);
  color: #22d3ee;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.shine-btn:hover {
  background: rgba(34, 211, 238, 0.2);
  border-color: rgba(34, 211, 238, 0.6);
}

.shine-btn--purple {
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

.shine-btn--purple:hover {
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(168, 85, 247, 0.6);
}

// Shine Border — pure CSS animation, no JS required.
// This script is a placeholder; the effect is driven entirely by CSS @keyframes and @property.
(function () {
  "use strict";
  // You can dynamically adjust the shine effect:
  // document.querySelector('.shine-border').style.setProperty('--shine-speed', '1.5s');
  // document.querySelector('.shine-border').style.setProperty('--shine-color-1', '#f59e0b');
  // document.querySelector('.shine-border').style.setProperty('--shine-color-2', '#ef4444');
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Shine Border</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="shine-border">
    <div class="shine-border__content">
      <h2 class="shine-title">Shine Border</h2>
      <p class="shine-body">
        A glowing animated border using a rotating gradient that sweeps light
        around the container edge for a premium look.
      </p>
      <div class="shine-footer">
        <span class="shine-badge">Premium</span>
        <button class="shine-btn">Get Started &rarr;</button>
      </div>
    </div>
  </div>

  <div class="shine-border shine-border--purple" style="margin-top: 2rem;">
    <div class="shine-border__content">
      <h2 class="shine-title">Custom Colors</h2>
      <p class="shine-body">
        Change the gradient colors to match your brand with simple CSS custom properties.
      </p>
      <div class="shine-footer">
        <span class="shine-badge shine-badge--purple">Pro</span>
        <button class="shine-btn shine-btn--purple">Upgrade &rarr;</button>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

import { type CSSProperties, type ReactNode } from "react";

interface ShineBorderProps {
  children: ReactNode;
  color1?: string;
  color2?: string;
  borderWidth?: number;
  speed?: string;
  borderRadius?: string;
  className?: string;
}

export function ShineBorder({
  children,
  color1 = "#22d3ee",
  color2 = "#3b82f6",
  borderWidth = 2,
  speed = "3s",
  borderRadius = "1.25rem",
  className = "",
}: ShineBorderProps) {
  const outerStyle: CSSProperties = {
    position: "relative",
    borderRadius,
    overflow: "hidden",
    padding: borderWidth,
  };

  const bgStyle: CSSProperties = {
    position: "absolute",
    inset: "-100%",
    background: `conic-gradient(from 0deg, ${color1}, transparent 25%, transparent 50%, ${color2}, transparent 75%, ${color1})`,
    animation: `shine-border-rotate ${speed} linear infinite`,
  };

  const contentStyle: CSSProperties = {
    position: "relative",
    zIndex: 1,
    borderRadius: `calc(${borderRadius} - ${borderWidth}px)`,
    background: "#0a0a0a",
  };

  return (
    <>
      <style>{`
        @keyframes shine-border-rotate {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
      `}</style>
      <div style={outerStyle} className={className}>
        <div style={bgStyle} />
        <div style={contentStyle}>{children}</div>
      </div>
    </>
  );
}

// Demo usage
export default function ShineBorderDemo() {
  return (
    <div
      style={{
        minHeight: "100vh",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: "2rem",
        background: "#0a0a0a",
        fontFamily: "system-ui, -apple-system, sans-serif",
        padding: "2rem",
      }}
    >
      <ShineBorder>
        <div
          style={{
            padding: "2rem",
            display: "flex",
            flexDirection: "column",
            gap: "1rem",
            width: "min(400px, calc(100vw - 4rem))",
          }}
        >
          <h2
            style={{
              fontSize: "1.375rem",
              fontWeight: 700,
              letterSpacing: "-0.02em",
              color: "#f1f5f9",
              margin: 0,
            }}
          >
            Shine Border
          </h2>
          <p
            style={{
              fontSize: "0.9375rem",
              lineHeight: 1.65,
              color: "#94a3b8",
              margin: 0,
            }}
          >
            A glowing animated border using a rotating gradient that sweeps light around the
            container edge for a premium look.
          </p>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              marginTop: "0.5rem",
            }}
          >
            <span
              style={{
                fontSize: "0.75rem",
                fontWeight: 600,
                padding: "0.25rem 0.75rem",
                borderRadius: "999px",
                background: "rgba(34,211,238,0.1)",
                border: "1px solid rgba(34,211,238,0.3)",
                color: "#22d3ee",
                textTransform: "uppercase",
                letterSpacing: "0.05em",
              }}
            >
              Premium
            </span>
          </div>
        </div>
      </ShineBorder>

      <ShineBorder color1="#a855f7" color2="#ec4899">
        <div
          style={{
            padding: "2rem",
            display: "flex",
            flexDirection: "column",
            gap: "1rem",
            width: "min(400px, calc(100vw - 4rem))",
          }}
        >
          <h2
            style={{
              fontSize: "1.375rem",
              fontWeight: 700,
              letterSpacing: "-0.02em",
              color: "#f1f5f9",
              margin: 0,
            }}
          >
            Custom Colors
          </h2>
          <p
            style={{
              fontSize: "0.9375rem",
              lineHeight: 1.65,
              color: "#94a3b8",
              margin: 0,
            }}
          >
            Change the gradient colors to match your brand with simple props.
          </p>
        </div>
      </ShineBorder>
    </div>
  );
}

<script setup>
const props = withDefaults(defineProps<{
  color1?: string; color2?: string; borderWidth?: number; speed?: string; borderRadius?: string
}>(), { color1: "#22d3ee", color2: "#3b82f6", borderWidth: 2, speed: "3s", borderRadius: "1.25rem" })
</script>

<template>
  <div style="min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;background:#0a0a0a;font-family:system-ui,-apple-system,sans-serif;padding:2rem">
    <div :style="{ position:'relative', borderRadius: props.borderRadius, overflow:'hidden', padding: props.borderWidth+'px' }">
      <div class="shine-bg" :style="{ position:'absolute', inset:'-100%', background:`conic-gradient(from 0deg,${props.color1},transparent 25%,transparent 50%,${props.color2},transparent 75%,${props.color1})`, animation:`shine-border-rotate ${props.speed} linear infinite` }"></div>
      <div :style="{ position:'relative', zIndex:1, borderRadius:`calc(${props.borderRadius} - ${props.borderWidth}px)`, background:'#0a0a0a', padding:'2rem', display:'flex', flexDirection:'column', gap:'1rem', width:'min(400px,calc(100vw - 4rem))' }">
        <h2 style="font-size:1.375rem;font-weight:700;letter-spacing:-0.02em;color:#f1f5f9;margin:0">Shine Border</h2>
        <p style="font-size:0.9375rem;line-height:1.65;color:#94a3b8;margin:0">A glowing animated border using a rotating gradient that sweeps light around the container edge for a premium look.</p>
        <div style="display:flex;align-items:center;margin-top:0.5rem">
          <span style="font-size:0.75rem;font-weight:600;padding:0.25rem 0.75rem;border-radius:999px;background:rgba(34,211,238,0.1);border:1px solid rgba(34,211,238,0.3);color:#22d3ee;text-transform:uppercase;letter-spacing:0.05em">Premium</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  @keyframes shine-border-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
</style>

<script>
export let color1 = "#22d3ee";
export let color2 = "#3b82f6";
export let borderWidth = 2;
export let speed = "3s";
export let borderRadius = "1.25rem";
</script>

<div style="min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;background:#0a0a0a;font-family:system-ui,-apple-system,sans-serif;padding:2rem">
  <div style="position:relative;border-radius:{borderRadius};overflow:hidden;padding:{borderWidth}px">
    <div class="shine-bg" style="--shine-speed:{speed};position:absolute;inset:-100%;background:conic-gradient(from 0deg,{color1},transparent 25%,transparent 50%,{color2},transparent 75%,{color1})"></div>
    <div style="position:relative;z-index:1;border-radius:calc({borderRadius} - {borderWidth}px);background:#0a0a0a;padding:2rem;display:flex;flex-direction:column;gap:1rem;width:min(400px,calc(100vw - 4rem))">
      <h2 style="font-size:1.375rem;font-weight:700;letter-spacing:-0.02em;color:#f1f5f9;margin:0">Shine Border</h2>
      <p style="font-size:0.9375rem;line-height:1.65;color:#94a3b8;margin:0">A glowing animated border using a rotating gradient that sweeps light around the container edge for a premium look.</p>
      <div style="display:flex;align-items:center;justify-content:space-between;margin-top:0.5rem">
        <span style="font-size:0.75rem;font-weight:600;padding:0.25rem 0.75rem;border-radius:999px;background:rgba(34,211,238,0.1);border:1px solid rgba(34,211,238,0.3);color:#22d3ee;text-transform:uppercase;letter-spacing:0.05em">Premium</span>
      </div>
    </div>
  </div>
</div>

<style>
  .shine-bg { animation: shine-border-rotate var(--shine-speed, 3s) linear infinite; }
  @keyframes shine-border-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
</style>

Shine Border

A container with a glowing, shining animated border created by a rotating linear gradient behind the content. The gradient rotation gives the illusion of light sweeping around the border.

How it works

A pseudo-element with a linear gradient rotates behind the card
The content layer sits on top with a solid background
The gap between the rotating gradient and the content edge creates the “shining border”
CSS @keyframes handle the continuous rotation

Customization

Change shine colors with --shine-color-1 and --shine-color-2
Adjust border thickness with --shine-border-width
Control speed with --shine-speed

When to use it

Highlighted feature cards
Premium or “pro” tier UI elements
Call-to-action containers