Front-endTools

CSS Box Shadow Generator

A box-shadow tool that allows you to add shadows to images and elements.
You can choose from a wealth of samples and customize them.
It also supports the generation of inner shadows (inset) and multiple shadows. It also supports pseudo-elements such as before and after.
Pneumophysism samples are also available.

Sample list. Select the one that most closely matches the image of what you want to make. It is possible to edit after selecting.

Please note that when you select the example in the sample list, any data being edited will be overwritten.
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
  • BOX-SHADOW
BOX-SHADOW
.original-box-shadow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  background-color: #dddddd;
  font-size: 30px;
  width: 300px;
  height: 100px;
  border-radius: 3px;
  box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.45);
}

Style editor

px
px
px
px
R
G
B
A

Set before, after

Other specifications

How to use the tool

・I don't know how to use the tool.
・I want to know various ways to use it
・I want to know the details of each item
For those who like, we have prepared a video that introduces the contents and features and explains how to use it.

Please take advantage of it.

List of generators

List of other Tools