CSS & Design Tools

Front-end work is full of small conversions and calculations. A designer hands you a HEX color and your CSS uses HSL, a mockup shows a gradient you need to reproduce, or a stylesheet has grown to hundreds of kilobytes and most of it never matches anything.

The color converter translates between HEX, RGB and HSL with a live preview, so you can adjust lightness or alpha and copy the result in the syntax you need. The gradient generator lets you add color stops, set the angle and copy the CSS. The PurgeCSS tool compares your CSS against your HTML and strips every selector that never matches. Run it first when page weight is the problem, because unused rules are often the largest thing you can remove.

The box shadow, border radius, flexbox and grid generators give you controls and a live preview for properties that are tedious to write by hand, and the PX to REM converter handles the unit math against your root font size. Every tool here runs in your browser and produces plain CSS you can paste into any project, with or without a framework.