Free Design Tools — CSS Gradients, Shadows & Colors
Build CSS gradients, shadows, clip-paths and easing curves, generate colour palettes, type and spacing scales, and check WCAG contrast — copy-ready CSS.
- Runs on your device
- No uploads
- Free, no sign-up
- Works on any device
Most used
Where most people start in design tools.
All design tools
11What people use these for
Start from the job you need done.
About these design tools
CSS values like a four-stop gradient, a layered shadow, a polygon clip-path or a cubic-bezier easing curve are painful to write blind. You change a number, reload, squint, change it again — when what you actually want is to drag a handle and watch it happen.
These are visual editors that hand back copy-ready CSS: build the thing on screen, then take the exact declaration. The colour tools go further and check what you've made against WCAG contrast requirements before it reaches production.
Frequently asked questions
Is the generated CSS production-ready?
Yes — it's standard CSS with no vendor prefixes needed for the properties covered here, all of which are supported across current browsers.
What contrast ratio do I actually need?
WCAG AA asks for 4.5:1 on body text and 3:1 on large text (18pt, or 14pt bold); AAA raises those to 7:1 and 4.5:1. The checker shows which thresholds a pair passes.
Why do the gradient palettes look smoother than a plain CSS gradient?
The gradient palette interpolates in linear-RGB space rather than straight sRGB, which avoids the muddy grey band you get halfway between two saturated colours.
Can I export a palette to use elsewhere?
Copy it as hex, RGB or HSL values, or download it as a PNG swatch sheet to drop into a design file or share with a client.
Do these work on a phone?
They do, though the drag-based editors — clip-path and cubic-bezier especially — are far easier with a mouse or trackpad.
Explore other categories
All toolsMissing a tool you need?
Tell us which design toolwould save you time and we'll look into building it.