How to Create a Box Shadow Generator with HTML, CSS, and JavaScript

Published on June 24, 2024

Hello everyone, and welcome back to our channel. Today, we’re going to dive into the world of web development and learn how to create a simple Box Shadow Generator using HTML, CSS, and JavaScript.

Let’s start by taking a look at the HTML code. As you can see, we have the basic structure of an HTML document here. We have the ‘DOCTYPE’ declaration, specifying the document type as HTML.

Next, we have a meta tag for the viewport, which ensures that our webpage is properly scaled to fit the device’s screen size. This is crucial for creating responsive designs.

Moving on, we link our CSS file using the ‘link’ tag. This allows us to style our HTML elements and give them the appearance we desire.

Now, let’s take a look at the body of our document. Inside the body tag, we have a container div, which will hold all our content.

Within the container, we have a ‘result‘ div. This is where our box shadow will be displayed.

Next, we have a series of slider controls. These sliders will allow users to adjust various properties of the box shadow, such as its horizontal and vertical offset, blur radius, and spread radius.

We also have a colour picker, which lets users choose the colour of the shadow.

And finally, we have a checkbox for toggling the inset shadow effect on or off.

At the bottom, we have a code wrapper with a textarea that will display the CSS code for the generated box shadow. Users can simply copy this code and use it in their own projects.

Lastly, we link our JavaScript file at the end of the body. This is where all the magic happens, as we’ll be using JavaScript to update the box shadow in real-time based on the user’s input.

CSS

We start off by resetting the default styles for all elements on our page. This ensures a clean slate and prevents any unexpected styling conflicts.

Next up, we set the background colour of our webpage using the ‘body‘ selector. Here, we’ve chosen a warm peachy colour to give our project a cosy feel.

Now, let’s focus on styling the container that holds our Box Shadow Generator. We give it a light cream colour background and some padding to create space around the content.

Inside the container, we have the result section where our box shadow will be displayed. We style it with a white background, padding, and border-radius to give it a neat appearance.

The ‘element’ div represents the box shadow itself. Here, we set its size, position it relatively within its container, and give it a default background colour.

Moving on to the slider controls, we use flexbox to arrange them vertically and give them some margin at the top for spacing.

In the code wrapper section, we style the textarea where the generated CSS code will be displayed. We set its appearance, border, and background colour to make it stand out.

Lastly, we style the copy button to give it a cohesive look with the rest of our design. We set its background colour, border-radius, and padding for a nice finish.

JAVASCRIPT

Next, we add event listeners to all the input elements within our sliders. This ensures that whenever a user interacts with the sliders, the ‘generateShadow‘ function will be called to update the box shadow.

Now, let’s take a closer look at the ‘generateShadow’ function. This function retrieves the values of all the input elements, calculates the box shadow based on those values, and applies it to the ‘element’ div. It also updates the CSS code displayed in the textarea.

In order to convert the hex colour value to RGBA format, we use the ‘hexToRgba‘ function. This function takes the hex colour and opacity as inputs, converts them to their respective RGB values, and returns the RGBA string.

Lastly, we have the ‘copyCode‘ function, which allows users to copy the generated CSS code to their clipboard with a single click. This makes it easy for them to use the generated box shadow in their own projects.

And there you have it, we’ve completed the JavaScript segment for our Box Shadow Generator! With these functions implemented, our project is now equipped to dynamically adjust the box shadow according to user input. In our upcoming video, we’ll seamlessly integrate all components and witness our Box Shadow Generator in full operation. Make sure to stay tuned for that! See you in the next video!