Design and web-CSS tools for the visual side of front-end work: colour picking with live HEX / RGB / HSL conversion, dedicated HEX↔RGB translation, multi-stop gradient generation (linear / radial / conic), visual box-shadow editing with multi-layer support, border-radius per-corner control, clip-path shape presets for masking, and a searchable Tailwind class reference. Every output is a copy-pasteable CSS snippet, tested against modern browsers. Live preview throughout so you can judge the result before copying.
For **colours** in general, Color Picker has a native picker + all three formats; HEX ↔ RGB is a leaner two-way conversion. To build a **gradient**, Gradient Generator produces linear / radial / conic CSS. For **shadows**, Box Shadow supports multi-layer composition. For **rounded corners**, Border Radius has linked and per-corner modes. For **non-rectangular shapes**, Clip Path has 11 shape presets. Don't remember a Tailwind class? Tailwind Classes is a keyword-search cheat-sheet over ~150 utilities.
Are these outputs cross-browser safe?
Yes — every tool produces standard CSS that works in Chrome, Safari, Firefox, Edge, and mobile equivalents. `conic-gradient` requires modern browsers; everything else is safe back to IE-replacement-era browsers.
Can I import a design from Figma or Sketch?
Not directly — these tools produce CSS strings. If your design tool exports CSS (most do), paste the values into the relevant tool and iterate from there.
Does Tailwind Classes cover the full catalog?
No — it's a curated ~150-entry subset covering the most-searched utilities (spacing, flex, grid, typography, borders, effects, position, display, overflow, cursor). For arbitrary values and responsive modifiers, check the official Tailwind docs.
Do the colour tools handle alpha channels?
Yes — HEX supports 8-digit form (with alpha), CSS rgb() / rgba() works throughout, and HSL supports opacity. Round-trip between formats is accurate within rounding.
Are any of these tools uploading my files?
No. Every tool in this category runs entirely in your browser. Files you drop in are processed locally, never sent to a server, and discarded when you leave the page.