UI Components Easy

Border Beam

A card with an animated beam of light that travels continuously around its border using conic-gradient and CSS keyframes.

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: grid;
  place-items: center;
  background: #0a0a0a;
}

/* --- Border Beam Card --- */
.border-beam-card {
  --beam-color: #22d3ee;
  --beam-speed: 4s;
  --border-width: 2px;

  position: relative;
  width: min(400px, calc(100vw - 2rem));
  border-radius: 1.25rem;
  overflow: hidden;
}

/* Rotating beam pseudo-element */
.border-beam-card__beam {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 70%,
    var(--beam-color) 76%,
    rgba(34, 211, 238, 0.6) 78%,
    transparent 82%,
    transparent 100%
  );
  animation: border-beam-rotate var(--beam-speed) linear infinite;
  z-index: 0;
}

/* Expand the gradient beyond card bounds to cover corners */
.border-beam-card__beam::before {
  content: "";
  position: absolute;
  inset: -50%;
  border-radius: inherit;
  background: inherit;
  animation: inherit;
}

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

/* Inner content overlaying the beam */
.border-beam-card__content {
  position: relative;
  z-index: 1;
  margin: var(--border-width);
  padding: 2.5rem;
  border-radius: calc(1.25rem - var(--border-width));
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #f1f5f9;
}

.card-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.card-title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

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

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

.card-btn {
  margin-top: 0.5rem;
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 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, transform 0.15s ease;
}

.card-btn:hover {
  background: rgba(34, 211, 238, 0.2);
  border-color: rgba(34, 211, 238, 0.6);
  transform: translateY(-1px);
}

.card-btn:active {
  transform: translateY(0);
}

// Border Beam — pure CSS animation, no JS required.
// This script is a placeholder; the entire effect is CSS-driven.
(function () {
  "use strict";
  // The beam animation runs entirely via CSS @keyframes.
  // You can dynamically adjust speed or color by setting custom properties:
  // document.querySelector('.border-beam-card').style.setProperty('--beam-speed', '2s');
  // document.querySelector('.border-beam-card').style.setProperty('--beam-color', '#a855f7');
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Border Beam</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="border-beam-card">
    <div class="border-beam-card__beam"></div>
    <div class="border-beam-card__content">
      <div class="card-icon">&#x2728;</div>
      <h2 class="card-title">Border Beam</h2>
      <p class="card-body">
        An animated beam of light travels around the card border using a rotating
        conic-gradient and CSS keyframes.
      </p>
      <div class="card-tags">
        <span class="tag">CSS</span>
        <span class="tag">Animation</span>
        <span class="tag">Gradient</span>
      </div>
      <button class="card-btn">Explore &rarr;</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

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

interface BorderBeamProps {
  children: ReactNode;
  beamColor?: string;
  beamSpeed?: string;
  borderWidth?: number;
  className?: string;
}

export function BorderBeam({
  children,
  beamColor = "#22d3ee",
  beamSpeed = "4s",
  borderWidth = 2,
  className = "",
}: BorderBeamProps) {
  const outerStyle: CSSProperties = {
    position: "relative",
    borderRadius: "1.25rem",
    overflow: "hidden",
  };

  const beamStyle: CSSProperties = {
    position: "absolute",
    inset: "-50%",
    borderRadius: "inherit",
    background: `conic-gradient(
      from 0deg,
      transparent 0%,
      transparent 70%,
      ${beamColor} 76%,
      ${beamColor}99 78%,
      transparent 82%,
      transparent 100%
    )`,
    animation: `border-beam-rotate ${beamSpeed} linear infinite`,
  };

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

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

// Demo usage
export default function BorderBeamDemo() {
  return (
    <div
      style={{
        minHeight: "100vh",
        display: "grid",
        placeItems: "center",
        background: "#0a0a0a",
        fontFamily: "system-ui, -apple-system, sans-serif",
      }}
    >
      <BorderBeam>
        <div
          style={{
            padding: "2.5rem",
            display: "flex",
            flexDirection: "column",
            gap: "1rem",
            color: "#f1f5f9",
          }}
        >
          <span style={{ fontSize: "1.75rem" }}>&#x2728;</span>
          <h2
            style={{
              fontSize: "1.375rem",
              fontWeight: 700,
              letterSpacing: "-0.02em",
              margin: 0,
            }}
          >
            Border Beam
          </h2>
          <p
            style={{
              fontSize: "0.9375rem",
              lineHeight: 1.65,
              color: "#94a3b8",
              margin: 0,
            }}
          >
            An animated beam of light travels around the card border using a rotating conic-gradient
            and CSS keyframes.
          </p>
          <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
            {["CSS", "Animation", "Gradient"].map((tag) => (
              <span
                key={tag}
                style={{
                  fontSize: "0.75rem",
                  fontWeight: 500,
                  padding: "0.25rem 0.75rem",
                  borderRadius: "999px",
                  background: "rgba(255,255,255,0.06)",
                  border: "1px solid rgba(255,255,255,0.1)",
                  color: "#cbd5e1",
                }}
              >
                {tag}
              </span>
            ))}
          </div>
        </div>
      </BorderBeam>
    </div>
  );
}

<script setup>
import { ref } from "vue";

const props = defineProps({
  beamColor: { type: String, default: "#22d3ee" },
  beamSpeed: { type: String, default: "4s" },
  borderWidth: { type: Number, default: 2 },
});

const tags = ["CSS", "Animation", "Gradient"];
</script>

<template>
  <div class="demo">
    <div class="outer">
      <div
        class="beam"
        :style="{
          background: `conic-gradient(from 0deg, transparent 0%, transparent 70%, ${props.beamColor} 76%, ${props.beamColor}99 78%, transparent 82%, transparent 100%)`,
          animation: `border-beam-rotate ${props.beamSpeed} linear infinite`
        }"
      />
      <div
        class="content"
        :style="{
          margin: props.borderWidth + 'px',
          borderRadius: `calc(1.25rem - ${props.borderWidth}px)`
        }"
      >
        <div class="card-inner">
          <span class="icon">&#x2728;</span>
          <h2 class="title">Border Beam</h2>
          <p class="desc">
            An animated beam of light travels around the card border using a
            rotating conic-gradient and CSS keyframes.
          </p>
          <div class="tags">
            <span v-for="tag in tags" :key="tag" class="tag">{{ tag }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@keyframes border-beam-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.outer {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
}
.beam {
  position: absolute;
  inset: -50%;
  border-radius: inherit;
}
.content {
  position: relative;
  z-index: 1;
  background: #0a0a0a;
}
.demo {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0a0a0a;
  font-family: system-ui, -apple-system, sans-serif;
}
.card-inner {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #f1f5f9;
}
.icon { font-size: 1.75rem; }
.title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #94a3b8;
  margin: 0;
}
.tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tag {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #cbd5e1;
}
</style>

<script>
export let beamColor = "#22d3ee";
export let beamSpeed = "4s";
export let borderWidth = 2;

const tags = ["CSS", "Animation", "Gradient"];
</script>

<style>
  @keyframes border-beam-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .outer {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
  }
  .beam {
    position: absolute;
    inset: -50%;
    border-radius: inherit;
    animation: border-beam-rotate var(--beam-speed, 4s) linear infinite;
  }
  .content {
    position: relative;
    z-index: 1;
    background: #0a0a0a;
  }
  .demo {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: #0a0a0a;
    font-family: system-ui, -apple-system, sans-serif;
  }
  .card-inner {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: #f1f5f9;
  }
  .icon { font-size: 1.75rem; }
  .title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
  }
  .desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #94a3b8;
    margin: 0;
  }
  .tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .tag {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #cbd5e1;
  }
</style>

<div class="demo">
  <div class="outer">
    <div
      class="beam"
      style="background: conic-gradient(from 0deg, transparent 0%, transparent 70%, {beamColor} 76%, {beamColor}99 78%, transparent 82%, transparent 100%); --beam-speed: {beamSpeed};"
    ></div>
    <div
      class="content"
      style="margin: {borderWidth}px; border-radius: calc(1.25rem - {borderWidth}px);"
    >
      <div class="card-inner">
        <span class="icon">&#x2728;</span>
        <h2 class="title">Border Beam</h2>
        <p class="desc">
          An animated beam of light travels around the card border using a
          rotating conic-gradient and CSS keyframes.
        </p>
        <div class="tags">
          {#each tags as tag}
            <span class="tag">{tag}</span>
          {/each}
        </div>
      </div>
    </div>
  </div>
</div>

Border Beam

A card/container with an animated beam of light that travels around its border continuously. The effect is achieved using a rotating conic-gradient behind the card with overflow hidden to reveal only the border region.

How it works

A pseudo-element with a conic-gradient is positioned behind the card content
The gradient has a narrow bright segment that acts as the “beam”
A @keyframes animation rotates the pseudo-element 360 degrees continuously
The inner content area masks the center, revealing only the glowing border

Customization

Change beam color via --beam-color (default: cyan/blue)
Adjust speed with --beam-speed (default: 4s)
Modify border width by adjusting the inner content inset

When to use it

Feature cards that need visual emphasis
Pricing cards or highlighted sections
Interactive dashboard widgets