Add a Drop Shadow to Social Media Icons on SquareSpace Using CSS

If you want to elevate the visual appeal of your website and make it stand out from the crowd, consider implementing a drop shadow effect to your social media icons. This small but mighty technique can have a significant impact on the overall aesthetic of your site, particularly if you are using similar button styles across your web pages.

To add this effect, you can use a simple CSS code snippet that targets your social media icons with precision. Specifically, the code targets the ".sqs-svg-icon--wrapper" class and adds a box-shadow property to it. By adjusting the values in the box-shadow property, you can control the size and color of the drop shadow. Modifying the pixel numbers will enable you to increase or decrease the size of the shadow, while changing the hex code will enable you to select your preferred color.

The Code

Copy and paste the CSS code I provided below. To change the color of the drop shadow, simply add the HEX code of your choosing. You can also adjust the angle and size of the shadow by adjusting the pixels (PX.)

//SOCIAL MEDIA ICON DROPSHADOW//

.sqs-svg-icon--wrapper {

box-shadow: 3px 3px #Ff6961;

}

Before custom CSS

After custom CSS

The beauty of this technique lies not only in the visual flair it adds to your social media icons but also in its ability to create a cohesive design throughout your website. By using the same drop shadow effect consistently across different elements of your site, you can achieve a polished and harmonious look that ties everything together.

So why not give it a try? Experiment with different sizes and colors to find the perfect drop shadow effect for your social media icons. With just a few lines of code, you can add personality and interest to your website design, creating an engaging and memorable experience for your visitors. Don't miss out on this simple yet effective way to elevate your website to the next level.

As always, if you have any questions, feel free to reach out!