Design & CSS tools
Build gradients, shadows and effects with copy-ready CSS.
CSS effects are far easier to design by eye than to write from memory. Nobody recalls the exact syntax for a multi-stop conic gradient, a layered box-shadow that reads as soft depth, or a cubic-bezier curve that feels right rather than mechanical. These generators give you visual controls and produce the corresponding CSS live, so you adjust until it looks correct and then copy the rule straight into your stylesheet.
Tools in this category
23About these tools
Gradients, shadows and layered depth
Convincing depth almost never comes from one shadow. Real interfaces stack a tight, dark, close shadow for contact with a wider, softer, lighter one for ambient falloff — and CSS allows multiple comma-separated shadows precisely for that. Gradients work the same way: adding intermediate colour stops is what removes the grey muddiness you get when a browser interpolates between two distant hues.
Colour formats and contrast
HEX is compact, RGB is explicit, HSL lets you build a palette by moving one number, and modern OKLCH keeps perceived lightness stable across hues so a set of colours actually looks like a set. Converting between them is routine; checking contrast is not optional, because text below the WCAG ratio is unreadable for a lot of people and is flagged by every accessibility audit.
Motion that does not feel cheap
A linear ease looks mechanical because nothing physical moves at a constant speed. Easing curves fix that, and the difference between a good transition and an irritating one is usually duration rather than curve: 150-250 ms for small state changes, a little longer for larger movements. Seeing the curve animate next to the code is what makes that judgement quick.