Generate CSS for Gradients, Shadows, and Borders
Some CSS properties are easy to understand but painful to write by hand. Gradients, box shadows, and border radius all take multiple values in a specific order — and getting them right means a lot of guess-and-refresh. This tool gives you sliders and color pickers instead.
The problem
Writing box-shadow: 4px 8px 16px 0px rgba(0,0,0,0.15) from memory is hard. You have to remember the order of offsets, blur, spread, and color. Gradients are worse — linear-gradient(135deg, #667eea 0%, #764ba2 100%) involves angles, color stops, and percentages that you can't visualize until you see them rendered.
The usual workflow is: write a guess, save, refresh the browser, squint at the result, adjust a number, and repeat. DevTools helps, but it still requires typing raw values. What you really want is to drag a slider and see the CSS update live.
How it works
- Pick a property. Gradients (linear or radial), box shadows, or border radius.
- Adjust with visual controls. Color pickers for gradient stops, sliders for shadow offsets and blur, corner handles for border radius.
- See the result live. A preview element updates in real time as you change values.
- Copy the CSS. One click to copy the exact property declaration, ready to paste into your stylesheet.
When to use this tool
- Designing button styles, card components, or hero sections with gradients
- Dialing in box shadow values for depth and elevation effects
- Creating asymmetric border radius for organic shapes
- Quickly prototyping visual styles before committing to code
- Learning CSS — seeing how each value changes the output builds intuition faster than reading docs
Why I built it
I can never remember the argument order for box-shadow. Is blur before spread or after? And I always forget whether gradient angles go clockwise or counterclockwise. I wanted a tool where I just move sliders until it looks right, then copy the code. No guessing, no save-and-refresh loop.
Built with vanilla HTML/JS. No frameworks, no backend, loads instantly.