Free online CSS & Design tools

Visual generators for CSS, colors, shadows and gradients.

9 tools

CSS box-shadow generatorDesign realistic shadows by stacking several layers, the way the best design systems do. Tune each layer’s offset, blur, spread, color and opacity and copy the result as CSS or as a Tailwind class.

Color converter (HEX, RGB, HSL, CMYK, OKLCH)Type a color in any format — #hex, rgb(), hsl(), hwb(), oklch() or a name like “tomato” — and instantly get every equivalent, its WCAG contrast against white and black, and a scale of tints and shades.

Color palette generatorStart from your brand color and get a full, perceptually uniform 50 to 950 scale ready for your design system, along with harmonious combinations. Your original color is kept exactly at its matching step.

CSS gradient generatorDesign gradient backgrounds by dragging color stops along a bar, choose the type (linear, radial or conic) and copy production-ready CSS with a fallback color and a modern OKLCH version without grey dead zones.

CSS Grid generatorSet columns, rows and gaps with sliders and see the result live. Copy the CSS and HTML ready to paste into your project.

Glassmorphism generator (frosted glass)Design frosted-glass cards and panels and see the result instantly on different backgrounds. The generated CSS includes the -webkit- prefix Safari still needs.

Image color palette extractorUpload a photo, logo or illustration and discover its main colors. Choose how many colors you want, copy each HEX with a click or the whole palette as CSS variables.

Neumorphism generator (Soft UI)Neumorphism makes elements look like they rise out of the background using two opposite shadows, one light and one dark. Tune every parameter, choose where the light comes from and copy the CSS.

SVG wave and blob generatorDesign wavy section dividers and unique organic shapes. Tweak points, amplitude and colors, regenerate until you like it, and copy the SVG code or download a PNG.