Ranked by what they cost, from the ones already installed on your machine to the ones worth paying for. Most CSS you would reach for a generator to write is now producible for nothing — the question is which nothing.
Chrome and Firefox DevTools contain generators most people never find. The colour swatch in the Styles pane opens an eyedropper and a contrast checker that shows the WCAG AA and AAA thresholds directly on the picker. Clicking the gradient preview opens a full gradient editor with draggable stops. The cubic-bezier icon next to any transition-timing-function opens a curve editor. And the Grid and Flexbox overlays let you toggle every alignment property visually and read the resulting CSS. Cost: zero, no tab switch, and the output is applied to the real element in context.
clamp() values from a min and max viewport. This is the one that removes the most hand-tuning from a real design system.box-shadow, and the output is plain CSS.Animation libraries and effect generators — the ones offering a gallery of keyframe animations with copyable CSS — typically give away the generator and charge for a curated collection or the ad-free version. Before paying, check whether you need more than three animations; most sites use a fade, a slide and a spinner, and those are ten lines you will write once.
Component and layout libraries sold as one-time purchases or subscriptions — Tailwind's official component collections, layout pattern books, and design-system starter kits — are not really generators. You are buying design decisions and the time not spent making them. That is a reasonable purchase for a team without a designer and a poor one if you already have opinions about spacing.
Vendor-prefix generators are obsolete: autoprefixer handles it from your browserslist config, and most of the prefixes they emit have not been needed for years. Anything producing a stack of four @font-face formats is equally stale, since woff2 alone covers current browsers. And any tool that outputs base64-encoded images inside CSS is trading cacheability for a single request you no longer need under HTTP/2.
Modern CSS does natively what generators used to compute. clamp() handles fluid sizing, color-mix() and oklch() handle tints and shades perceptually, @container queries handle component-level responsiveness, and custom properties handle theming. Learning those four is a better investment than any bookmark folder.