CSS generators solved real problems in 2015. Most of those problems no longer exist, and the output people still copy from them carries assumptions that are now wrong.
The prefixed, five-variant gradient blocks these tools produce are obsolete. background: linear-gradient(135deg, #ff5f1f, #cc5500); works everywhere that matters. Modern CSS goes further than any generator UI: linear-gradient(in oklch, …) interpolates in a perceptual space so the midpoint does not go grey, and conic-gradient() and repeating-linear-gradient() cover patterns that used to require an image.
It has not since roughly 2013. box-shadow, border-radius, transform, transition and animation are all unprefixed. Copying a generator's -webkit- and -moz- block adds bytes and occasionally pins you to old behaviour when a stale prefixed property wins the cascade.
There are five properties worth knowing and they take an afternoon: display: flex, flex-direction, justify-content (main axis), align-items (cross axis), and gap. Learning them beats a UI, because a generator cannot tell you the thing that actually causes flexbox bugs: a flex child defaults to min-width: auto, so long content refuses to shrink and blows out the layout. min-width: 0 on the child is the fix, and no generator emits it.
A responsive card grid is one line: grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));. Generators typically produce fixed column counts with media queries, which is more code and less responsive. Named template areas are readable enough that a generated equivalent is harder to maintain than the original.
It is optimised for demonstrating the tool. Generators emit absolute pixel values, hardcoded hex colours and duplicated declarations because they have no view of your design system. Every generated block you paste is a value that will not update when your tokens change.
The border-hack triangle still works, but clip-path: polygon(50% 0, 100% 100%, 0 100%) is clearer, animatable and does not depend on a border trick. For anything more complex, an inline SVG is smaller and sharper than a CSS shape built from pseudo-elements.
They produce keyframes. What makes animation good is duration and easing — 150-250 ms for a state change, 200-400 ms for something entering, a custom cubic-bezier rather than the sluggish default ease. And every generated animation is missing the same thing: a @media (prefers-reduced-motion: reduce) block that shortens or removes it for users who ask for less motion.
It emits whatever its author last updated. Check the feature yourself, and use @supports when you genuinely need a fallback: @supports (color: oklch(0 0 0)) { … }. That is more reliable than trusting a tool's assumptions about a browser landscape that changed after it was written.
Two things, honestly. Complex layered box-shadow stacks where iterating visually beats guessing numbers, and cubic-bezier curve editors where a draggable graph genuinely is the best interface. Use them for exploration, then convert the output into tokens and shared classes rather than pasting one-off values into a component.