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.

Which tool for which job

  • Convert a designer's HEX color to HSL or RGB

    Color Converter. Adjust lightness or alpha against the live swatch and copy the value in the syntax your CSS uses.

  • Recreate a gradient from a mockup

    CSS Gradient Generator. Add color stops, set the angle or switch to radial, then copy the CSS.

  • Cut unused rules from a theme or framework stylesheet

    Purge CSS. Paste the CSS and the HTML that uses it. Classes that JavaScript adds later must appear in that HTML, or their rules will be removed.

  • Give a card a soft, layered shadow

    CSS Box Shadow Generator. Two or three stacked shadows with different blur usually look more natural than one large shadow.

  • Round corners or draw a blob shape

    CSS Border Radius Generator. Set each corner on its own, including the elliptical values after the slash that produce blob shapes.

  • Center something or space items in a row

    CSS Flexbox Generator. Change justify-content, align-items and gap on real boxes and watch what each one does.

  • Lay out a page in rows and columns

    CSS Grid Generator. Start from a preset, adjust the tracks, then copy grid-template-columns and the rest.

  • Turn pixel values from a design into rem

    PX to REM Converter. Set your root font size, then convert a single value or a whole stylesheet.

Other tool categories

Specifications and references

This tool follows the specifications below. Read them when you need the exact normative wording, for example to settle an edge case between two implementations.

Frequently Asked Questions

Should I use flexbox or grid?

Flexbox arranges items along one axis and lets their content decide the sizes, which suits navigation bars, button groups and centering. Grid defines rows and columns up front, which suits page layouts and anything that has to line up in both directions. Many sites use grid for the page and flexbox inside each component.

Why use rem instead of px for font sizes?

rem is relative to the root font size, which follows the default font size the user sets in the browser. Text sized in px ignores that setting. Page zoom scales both, but a reader who raises the default font size only gets larger text from rem-based styles.

HEX, RGB or HSL: which should I write in CSS?

Browsers treat them the same, so pick whichever is easiest to edit. HSL makes lighter and darker variants simple, because you change one number. HEX is the shortest and is what most design tools export. All three can carry transparency: rgb() and hsl() take a fourth value, and HEX has an eight-digit form such as #6366f180.

Copied to clipboard!