CSS tools
13 toolsVisual generators for gradients, shadows, border radius, clamp(), grid, and flexbox. Drag the sliders until it looks right, then copy the CSS that got written for you. Faster than memorizing syntax you use twice a year.
Like everything on loot.tools, these run entirely in your browser. Free, no account, and nothing you enter leaves the tab.
Which one do you need?
Most of the group is visual builders for effects: CSS Gradient Generator for backgrounds, Box Shadow Generator and Text Shadow Generator for depth, CSS Filter Generator for blur and color treatments, Border Radius Generator for corners, and Glassmorphism Generator for the frosted-glass card look. Drag the controls, watch the preview, copy the CSS.
The layout pair works the same way for structure. CSS Grid Generator builds a grid template you can actually see, and CSS Flexbox Generator does the same for flex containers, which beats re-reading the flexbox spec for the fourth time.
The rest are unit and syntax helpers. PX to REM Converter translates px to rem, em, pt, and %. CSS Clamp Generator writes the clamp() expression that makes type scale smoothly between screen sizes. Cubic Bezier Generator shapes an easing curve you can preview before an animation uses it. CSS Specificity Calculator explains why one selector beats another, and SVG to Data URI packs an SVG into a string you can drop straight into background-image.