CSS & Design
Front-end work is full of small conversions and adjustments: turning a hex colour into RGB or HSL to tweak it, nudging lightness for a hover state, or reasoning about a value across colour spaces. These design tools convert colours between the common CSS notations with a live preview, expand shorthand and preserve alpha, and explain the details that matter — how #RGB shorthand expands, why HSL is easier to tune by hand than RGB, and where the sRGB gamut ends and newer spaces like OKLCH begin. They run instantly in the browser, so you can iterate on a palette without leaving the page or installing anything.
Color ConverterConvert colors between HEX, RGB and HSL in your browser with a live swatch. Handles alpha, #RGB shorthand and rgb()/hsl() syntax — private and free.CSS Box Shadow GeneratorGenerate CSS box-shadow code with a live preview. Set offset, blur, spread, color and inset with sliders, then copy the ready-to-paste declaration.CSS Gradient GeneratorBuild CSS linear and radial gradients with a live preview. Add color stops, set the angle, and copy the ready-to-use background declaration instantly.CSS Units ConverterConvert CSS lengths between px, rem, em, pt, %, vw and vh with a live size preview. Set root, parent and viewport context, then copy — private and free.CSS Flexbox GeneratorBuild a display:flex layout with a live preview. Pick flex-direction, justify-content, align-items, flex-wrap and gap, then copy the ready-to-paste CSS.CSS Border Radius GeneratorRound each corner independently with a live preview and copy the shortest valid border-radius shorthand. Supports px, rem, em and % units — private and free.CSS clamp() GeneratorGenerate a fluid clamp() font size that scales between two viewport widths. Enter min and max sizes, copy the clamp(), and watch a live preview scale.