Magic lights for your cards

Design glowing gradient borders for your cards, then copy the Tailwind CSS or plain CSS code.

Card example

You can create new colors examples

Light configuration

Border

Click an edge

Color

Primary color

Secondary color

Color 3

Glow

Bar size

Thickness

Blur

Opacity

Animated

Card

Background

Border

Radius

Theme mode

More settings

Code

JSX

<div className="relative aspect-[9/16]">
  <div className="pointer-events-none absolute -inset-[12px] blur-[16px]">
    <div className="absolute inset-0 rounded-[18px] p-[24px] [mask:linear-gradient(#000_0_0)_content-box_exclude,_linear-gradient(#000_0_0)] bg-gradient-to-r from-indigo-500 via-purple-500 to-red-500 animate-text" />
  </div>
  <div className="relative z-10 h-full rounded-[6px] border border-[#3a3a3a] bg-[#1c1c1c] p-4">
    {/* Your content */}
  </div>
</div>

tailwind.config.ts

// tailwind.config.ts → theme.extend
animation: {
  text: "text 5s ease infinite",
},
keyframes: {
  text: {
    "0%, 100%": {
      "background-size": "200% 200%",
      "background-position": "left center",
    },
    "50%": {
      "background-size": "200% 200%",
      "background-position": "right center",
    },
  },
},

Last update: October 1, 2026