The little CSS helper
Generate box-shadows, gradients and responsive clamp() values with a live preview — and copy the code in one click.
How it works
Pick a tool
Switch between the box-shadow, gradient and clamp() generators with the tabs at the top of the card.
Adjust & preview
Drag the sliders and tweak the inputs. The live preview updates instantly while you work.
Copy the CSS
Hit the copy button to grab the generated CSS and paste it straight into your stylesheet.
Frequently asked questions
Is my data sent anywhere?+
No. Every generator runs entirely in your browser. Nothing you type or generate ever leaves your device.
Can I stack multiple box-shadows?+
Yes. Add as many shadow layers as you like — each with its own offset, blur, spread, color and inset toggle. They're combined into a single comma-separated box-shadow value.
What does the clamp() viewport mode do?+
It takes a min and max viewport width plus a min and max size, then calculates the fluid preferred value for you, so your text or spacing scales smoothly between those two screen widths.
Which gradient types are supported?+
Linear, radial and conic gradients, each with unlimited color stops and adjustable positions.