Get "PHP 8 in a Nuthshell" (Now comes with PHP 8.3)
Amit Merchant

Amit Merchant

A blog on PHP, JavaScript, and more

Lightsaber Borders in CSS

Ever wondered how you can create a lightsaber border in CSS? If you’re not a fan of Star Wars, a lightsaber is a fictional energy sword featured in the Star Wars universe.

It consists of a polished metal hilt that projects a blade of plasma about 1.33 meters long. Here’s how it looks like.

A Star Wars character is holding a Lightsaber

So, how can we create a lightsaber border in CSS? Turns out, it’s pretty easy.

All we need to do is to play with the border and box-shadow properties. Keep in mind that this effect works best on a dark background.

So, for instance, if we want to create a lightsaber border on a div element with class lightsaber, we can do so like this.

<div class="lightsaber">
    Lightsaber Borders

Here’s the CSS.

body {
  --darkblue: #040a2c;
  --lightblue: #00f0ff;
  background-color: var(--darkblue);

.lightsaber {
  border: 3px solid var(--lightblue);
  box-shadow: 0 0 15px var(--lightblue),inset 0 0 15px var(--lightblue);

As you can tell, the border property is used to create the lightsaber border which you can assume it as a lightsaber blade. The box-shadow property is used to create the glow effect around it. It uses inset and outer shadows to create the effect.

Here’s a CodePen to see it in action.

See the Pen Gradient borders in CSS by Amit Merchant (@amit_merchant) on CodePen.

Like this article? Consider leaving a


👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.