CSS & Design Tools
Visual generators and calculators for front-end and Webflow developers.
CSS Gradient GeneratorDesign a gradient visually — drag colour stops, change the angle or type, start from a preset — and copy…Box Shadow GeneratorStack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the…Clamp CalculatorEnter a minimum and maximum size and the viewport range — get a zoom-friendly clamp() value with the maths…PX to REM ConverterConvert between pixels, rem and em with your own root font size — or paste a whole stylesheet and convert…SVG to JSX ConverterPaste an SVG from Figma, Illustrator or an icon set and get a ready-to-use React (JSX or TSX) component —…SVG to CSS ConverterPaste an SVG and get a compact, URL-encoded data URI plus ready-made background-image and recolourable…Glassmorphism GeneratorDesign a frosted-glass card with live sliders and copy cross-browser CSS — with the…Tailwind Arbitrary Value GeneratorPaste CSS and get Tailwind’s bracket syntax right the first time — spaces turned into underscores, type…SVG ViewBox ScalerNormalise icons to a new viewBox (e.g. 24×24) by rescaling the actual coordinates inside every path,…