☁️

css-box-shadow-generator,

CSS box-shadow Generator

Generate advanced CSS shadows (box-shadow) with an intuitive UI.
A free tool that supports multiple layers and the latest design trends.

🥞

Multi-layer

Stack multiple shadows for rich expressions

🎨

Presets included

Instantly apply Neumorphism, etc.

⚡

Tailwind support

Supports both standard CSS and Tailwind output

Layer settings

Shadow parameters

X offset (px) 0px

Y offset (px) 4px

Blur (px) 12px

Spread (px) 0px

Shadow color

Opacity (%) 10%

Inner shadow (inset)

Preview

BOX

Width

120px

Height

120px

Border Radius

12px

Background color

Box color

About

The CSS box-shadow Generator is a free tool that creates essential shadow styles (box-shadow) for web design with an intuitive UI.

Not only simple shadows, but also rich shadows with multiple layers, smooth shadows like those used by Apple and modern web services, 3D Neumorphism, and flat Neo Brutalism can be created instantly from presets.

The generated code can be output in three formats: standard CSS properties, CSS variables (custom properties), and Tailwind CSS utility classes (supports arbitrary values), and can be copied with a single click.

How to use

1 Choose a base

Choose a preset from the top that is close to the image you want to create. Of course, you can also build from scratch by adding layers.

2 Adjust shadows

Adjust X/Y offsets (position), blur strength, spread, color, and opacity. By stacking multiple shadows with "Add layer", you can create more natural and luxurious shadows.

3 Copy code

Select "CSS" or "Tailwind" from the output panel according to your environment, and press the clipboard button to copy the code.

Properties

Syntax and properties of box-shadow


box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

offset-x / offset-y: The horizontal and vertical position of the shadow. Positive values move the shadow to the right/down, negative values move it left/up.
blur-radius: The blurriness of the shadow. The larger the value, the wider and lighter the shadow spreads. At 0, it becomes a sharp boundary (solid shadow).
spread-radius: Expands or shrinks the size of the shadow itself. Positive values result in a larger shadow than the element, negative values result in a smaller shadow.
inset (inner shadow): When this keyword is specified, the shadow falls inside the element rather than outside. Used for expressing indented UIs.

FAQ

Q. Does box-shadow affect performance?

A.Large blurred shadows and multiple layers are expensive to draw, so rendering may become sluggish on mobile devices. Special care is needed when animating box-shadow.

Q. What is the difference between box-shadow and filter: drop-shadow?

A.box-shadow applies a shadow to the element's box (rectangle). On the other hand, filter: drop-shadow() generates a shadow for the opaque shape of the element (such as the outline of a transparent PNG).

Q. In what expressions is inset used?

A.It is used for the pressed state of buttons (dent effect), inner shadows of text fields, highlight drawing in Neumorphism, etc.

Q. What are the benefits of stacking multiple shadows?

A.Stacking multiple layers can express more natural and realistic depth than a single blurred shadow. For example, stacking a near shadow (small and dark) and a far shadow (large and light) is a common technique.

Use cases

Card UIs and modals

Makes elements stand out from the background, visually conveying to the user that they are clickable elements or important content.

Button hover/active states

By spreading the shadow on mouse hover or switching to `inset` on click, you can implement an interactive button with a pressing feel.

Neumorphism design

By placing a light shadow and a dark shadow diagonally on an element of the same color as the background, you create a texture that makes the element appear pushed out or indented.