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.
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
</div>
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.
👋 Hi there! I'm Amit. I write articles about all things web development. If you enjoy my work (the articles, the open-source projects, my general demeanour... anything really), consider leaving a tip & supporting the site. Your support is incredibly appreciated!
