The designer sent a new UI design draft, and I opened it to take a look - all kinds of beautiful cards, buttons, and pop-up windows, all with soft shadow effects. These details make the interface look layered, modern and sophisticated.
But here comes the question: How to restore these shadows?
The pain of manually adjusting parameters
At first, I thought it was very simple. Isn’t it just
box-shadow? I started adjusting in the browser developer tools:
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
Save, refresh, wrong. Change again:
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.12);
Still wrong. After going back and forth more than twenty times, the designer said: "It still doesn't feel right. I need to make it softer..."
I was devastated.
box-shadow's parameter trap
box-shadow has 5 parameters:
- horizontal offset(offset-x) — shadow moves left or right
- vertical offset(offset-y) — shadow moves up or down
- blur radius(blur-radius) — shadow feathering degree
- spread radius(spread-radius) — shadow scaling
- color(color) — The color of the shadow supports transparency
If each parameter is changed a little bit, the effect will be completely different. Even worse:
- Positive and negative values have completely opposite effects in different directions
- The interaction of blur radius and diffusion radius is difficult to understand intuitively
- Color transparency needs to be converted to RGBA format
Half an hour passed and I was still adjusting the first shadow. There are over 20 different shadow effects throughout the page...
Solving the problem with visual tools
I opened ToolMi's CSS shadow generator.
The interface is very intuitive:
- 5 sliders to control various parameters
- Real-time preview area display effect
- Support inner shadow/outer shadow switching
- Copy the generated code with one click
First try
The designer said: "The shadow of this card is softer and has a sense of hierarchy."
In the tools I:
- Drag the Blur Radius to 24px
- Set Opacity to 15%
- Adjust Vertical Offset to 8px
The live preview area immediately showed the effect — exactly the soft shadow I wanted!
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);
Click copy, paste into the code, and refresh the page. The designer looked at it and said, "Yes, that's what it feels like!"
Batch processing of all shadows
After the first success, I processed it much faster:
- Button shadow:
0px 2px 8px rgba(0, 0, 0, 0.1) - Pop-up shadow:
0px 12px 32px rgba(0, 0, 0, 0.2) - Input box focus shadow:
0px 0px 0px 3px rgba(66, 153, 225, 0.3)
Each shadow takes an average of 30 seconds to complete, including preview and adjustment.
From 2 hours to 20 minutes
Let me calculate the efficiency comparison:
| Method | Single shadow time | 20 shadows total time | Accuracy |
|---|
| Manual adjustment | 5 minutes||~100 minutes | 60% | Visualization tools |
| 1 minute | ~20 minutes | 95% | Practical tips |
1. Commonly used shadow parameters
After many times of practice, I have summarized some common parameters:
Soft card shadow:
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
- Floating pop-up window shadow:
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.2);
Inner shadow can create a sunken effect:
Sunken effect of input box
/3. Shadow hierarchy principle/
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.06);
The closer the element is to the user, the stronger the shadow (pop-up > card > Button)
- Elements at the same level, have consistent shadow intensity
- Avoid excessive shadow intensity and maintain visual unity
- 4. Performance Notes
Shadows will affect rendering performance. Recommendations:
Reduce the use of shadows on mobile terminals
- Avoid changing box-shadow during animations
- Consider using pseudo-elements for large-area shadows
- My experience summary
After using the visualization tool, my workflow became:
Open the tool
- — Loading page < 1 SecondsAdjust parameters
- — Drag the slider and preview in real timeCopy code
- — Use one-click copy and pasteFine-tuning and optimization
- — Fine-tune according to the actual effectThe whole process is smooth and natural, and there is no longer the frustration of "it still doesn't work after a long time of modification".
Shadow parameter quick check
Effect
| offset-x | offset-y | blur | spread | opacity | Slightly floating |
|---|
| 2px| ||8px | 0 | 10% | Soft card | 0 | 24px |
| 15% | 0 | 8px | Strong floating layer | 0 | 12px |
| 32px | 0 | 20% | Debossed effect | 0 | 4px |
| 6% (inset) | 0 | 2px | Summary | 0 | The parameter tuning of CSS box-shadow should not be a burden for development. With the visualization tool, I can: |
⚡ Quickly generate shadow code
👁️ Preview the effect in real time
- 🎯 Precisely control each parameter
- 📋 One-click copy and use
- Complete all shadow adjustments in 20 minutes, the designer is satisfied, and I save a lot of time. This is the efficient way to work.
- 📋 一键复制使用
20 分钟完成所有阴影调整，设计师满意，我也省了大量时间。这才是高效的工作方式。