How to Make Electric Border in UI (Animated CSS & Tailwind Example)

Electric borders are glowing, animated outlines that make UI elements stand out with a futuristic feel. Designers often use them on buttons, cards, loading screens, and banners to draw attention or create a high-tech aesthetic.

In this guide, we’ll show you how to create a beautiful electric border using both plain CSS and Tailwind CSS, with full copyable code and design tips!

---

Live Electric Border Example

Electric Border

Try this glowing effect on your website cards or buttons. You can customize the colors easily!

---

 Copy & Paste Code

<!-- Electric Border HTML --> <div class="glow-card card-orange"> <div class="glow-inner"> <div class="glow-border-1"></div> <div class="glow-border-2"></div> <div class="overlay"></div> <div class="overlay overlay-light"></div> <div class="bg-glow"></div> <div class="glass-label">Electric Border</div> </div> </div> <!-- Electric Border CSS --> <style> .svg-filters { position: absolute; width: 0; height: 0; } .glow-card { position: relative; padding: 2px; border-radius: 1.5rem; background: linear-gradient( -30deg, var(--gradient-color), transparent, var(--gradient-color) ), linear-gradient(to bottom, oklch(0.185 0 0), oklch(0.185 0 0)); } .card-orange { --filter: url(#filter-orange); --border-color: #f97316; --light-color: oklch(from var(--border-color) l c h); --gradient-color: oklch(from var(--border-color) 0.3 calc(c / 2) h / 0.4); } .card-blue { --filter: url(#filter-blue); --border-color: #3b82f6; --light-color: oklch(from var(--border-color) l c h); --gradient-color: oklch(from var(--border-color) 0.3 calc(c / 2) h / 0.4); } .glow-inner { width: 22rem; aspect-ratio: 7 / 10; border-radius: 1.5rem; border: 2px solid var(--border-color); filter: var(--filter); position: relative; overflow: hidden; } .glow-border-1, .glow-border-2, .overlay, .overlay-light, .bg-glow { position: absolute; inset: 0; border-radius: 1.5rem; } .glow-border-1 { border: 2px solid oklch(from var(--border-color) l c h / 0.6); filter: blur(1px); } .glow-border-2 { border: 2px solid var(--light-color); filter: blur(4px); } .overlay { mix-blend-mode: overlay; transform: scale(1.1); filter: blur(16px); background: linear-gradient( -30deg, white, transparent 30%, transparent 70%, white ); } .overlay-light { opacity: 0.5; } .bg-glow { filter: blur(32px); transform: scale(1.1); opacity: 0.3; z-index: -1; background: linear-gradient( -30deg, var(--light-color), transparent, var(--border-color) ); } .glass-label { background: radial-gradient( 47.2% 50% at 50.39% 88.37%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100% ), rgba(255, 255, 255, 0.04); border-radius: 14px; padding: 0.5em 1em; text-transform: uppercase; font-weight: bold; font-size: 0.85em; color: rgba(255, 255, 255, 0.8); position: relative; width: fit-content; } .glass-label::before { content: ""; position: absolute; inset: 0; padding: 1px; background: linear-gradient( 150deg, rgba(255, 255, 255, 0.48) 16.73%, rgba(255, 255, 255, 0.08) 30.2%, rgba(255, 255, 255, 0.08) 68.2%, rgba(255, 255, 255, 0.6) 81.89% ); border-radius: inherit; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: xor; -webkit-mask-composite: xor; pointer-events: none; } </style>

---

 How It Works (Step-by-Step)

• box-shadow & blur() create glowing edges.
• linear-gradient adds color transitions.
• mix-blend-mode: overlay enhances brightness layers.
• CSS variables make it easy to change color themes.
• filter: url() applies SVG glow filters for depth.
  
  
  

---

 Bonus Tips for Designers

• Try different colors like #22d3ee (cyan) or #a855f7 (purple).
• Make it responsive by using max-width: 100%; on .glow-inner.
• Use this border effect on hover states for buttons.
• Keep gradients subtle for better performance.

---

Conclusion

Electric borders can instantly add futuristic energy to your UI. Customize the colors, animation speed, or gradient angle to match your theme.

Try this on your website and tag @webbeast for a feature!

---

See the Pen Electric Border by M.B.Patel (@brijmansuriya) on CodePen.