CSS GENERATOR
CSS generator, tweak it and copy the code.
Adjust shadow and gradient visually, preview live on the right, then copy the CSS in one click. Everything runs locally in your browser.
Shadow (box-shadow)
Shadow preview
box-shadow: 0px 12px 30px 0px rgba(0, 0, 0, 0.35);
Gradient (linear-gradient)
background: linear-gradient(135deg, #5b7cff, #9b5bff);
Everything runs locally in your browser
What does this tool do?
Some CSS properties — especially box-shadow — take many parameters and are easy to mistype. This tool lets you adjust them visually with sliders and color pickers, then generates paste-ready CSS in real time. Copy the result to your clipboard with one click.
示例与注意事项Example & notes
一个例子A worked example
调圆角、阴影与渐变，右侧实时生成可粘贴的 CSS，省掉手写试错的来回。Tune radius, shadow and gradient while the CSS updates live on the right, removing trial-and-error.
注意事项Things to watch
- box-shadow 层数不要太多，多层阴影在低端设备上有明显性能开销。Keep shadow layers few — stacked shadows cost performance on low-end devices.
- px 与 rem 混用会让等比缩放失效，建议统一单位。Mixing px and rem breaks proportional scaling; pick one.
- 深色主题下阴影要降低不透明度，否则看起来发脏。On dark themes lower the shadow opacity or it looks muddy.
相关问答More Q&A
能一键复制代码吗？Is there a copy button?
可以，代码块右上角有复制按钮，复制的是纯 CSS。Yes — the copy button in the corner copies clean CSS.
能生成 Tailwind 类名吗？Can it output Tailwind classes?
目前输出原生 CSS，便于直接落库或加进样式文件。It outputs plain CSS, which drops straight into a stylesheet.