Connect with us!

LIGHTSABER BUILD Jedi using HTML and CSS tutorial for beginners using VSCode Editor

akashsalow
January 27, 2022
CSS, 3D

The lightsaber is the weapon of a Jedi. Jedi can predict and deflect incoming blaster bolts, and reflect them. It is a star wars weapon.

Have you ever wondered how to create one using HTML5 and CSS3.

The most important properties we use to create easter egg are:

The border-radius rounds the corners of the element.

The box-shadow adds shadow effects around an element frame.

Here is the CSS class for implementing it.

Table of Contents

LIGHTSABER BUILD Code Block

.light-saber {
  position: absolute;
  top: 30%;
  border-radius: 10px;
  left: 5%;
  width: 400px;
  height: 20px;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
    0 0 100px #03e9f4;
  background: white;
}

Yay! We have created a lightsaber using CSS. Its very simple to use the class above and create this element.

Here is the output:

Light Saber CSS output

You can find the complete coding tutorial in the following Youtube video.

Video Tutorial for Creating Lightsaber

Lightsaber shorts

Here is the complete code of HTML and CSS for creating Lightsaber

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .light-saber {
        position: absolute;
        top: 30%;
        border-radius: 10px;
        left: 5%;
        width: 400px;
        height: 20px;
        box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
          0 0 100px #03e9f4;
        background: white;
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Light Saber</h1>
    <div class="light-saber"></div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own lightsaber using CSS and HTML. Good luck and happy coding !