DEV Community

Cover image for 100 CSS Box Shadow Presets
Imia Hazel
Imia Hazel

Posted on

100 CSS Box Shadow Presets

CSS box-shadow is a fabulous CSS property. It adds shadow effects around an HTML element. Adding multiple effects separated by commas is my favorite feature of this box-shadow property.

Innumerable shadows are possible by combining the available values of the box-shadow property. Color, blur, spread radius, and other properties give the interface a magical look.

100 CSS Box Shadow Presets

100 CSS Box Shadow Presets

Here are 100 CSS box-shadow presets for the quick start of designer imagination. These presets range from basics to modern and conventional to popular design systems.

Box Shadow Generator

Box Shadow Generator

Each CSS box-shadow example is editable via an easy-to-use CSS box-shadow generator. Following is a quick guide for creating your masterpiece box-shadow quickly.

Quick Guide

  1. Choose an example from 100 CSS box-shadow presets.
  2. If you like the preset, copy it, and you are good to go.
  3. Click on the Edit button to launch the box-shadow generator.
  4. You can add or remove as many shadows as you like.
  5. Adjust the box-shadow properties to match your taste.
  6. Copy the box-shadow snippet to use in your project.

Support The Project

I hope you will like this. Please share it with your buddies to support the project.

Top comments (4)

Collapse
 
grahamthedev profile image
GrahamTheDev

Lol I literally just said I hadn’t heard from you in a while on Twitter and you go and drop an article! 🤣❤️🦄

Collapse
 
imiahazel profile image
Imia Hazel

What a coincidence. Thanks a lot for your continued support. How's your journey in article writing.

Collapse
 
grahamthedev profile image
GrahamTheDev

I will be launching a new site in a couple of weeks dedicated to developer health.

So you will see a lot more from me then.

Quick sneak peak for you:

developer.health website mockup, pink and dark grey theme with SVG graphics using same colour scheme

Thread Thread
 
imiahazel profile image
Imia Hazel

It's a fantastic idea, and by the way, the color scheme is awesome. I wish you massive success with your project.