Design & CSS
Generate CSS gradients, shadows and color scales and check contrast — copy-ready code.
Code to Image
Turn a code snippet into a polished, syntax-highlighted PNG card in your browser, with a theme, gradient or transparent background, and padding — no upload.
Color Contrast Checker
Check the WCAG contrast ratio between a foreground and background HEX color and see whether it passes AA and AAA for both normal and large text.
Color Shades Generator
Turn one base HEX color into a Tailwind-style 50-950 shade scale, mixing toward white and black, each step with a swatch and copyable HEX.
CSS Box-Shadow Generator
Build a multi-layer CSS box-shadow with offset, blur, spread, color and inset controls, see a live preview, and copy the ready-to-use property.
CSS Gradient Generator
Build a linear, radial or conic CSS gradient with custom color stops and an angle, preview the result live, and copy the ready-to-paste background rule.