Donaldson R F Free Design Tools
Colour, CSS, gradients, shadows and layout helpers for web designers and developers.
15 free tools in this category. No sign-up, no limits.
CSS Gradient Generator
Pick two colors and an angle, get ready-to-use CSS.
Open tool →CSS Box Shadow Generator
Build a box-shadow visually and copy the code.
Open tool →CSS Border Radius Generator
Adjust each corner independently and copy the CSS.
Open tool →Color Palette Generator
Generate a color palette from a base color.
Open tool →Color Contrast Checker
Check contrast ratio against WCAG accessibility standards.
Open tool →CSS Flexbox Generator
Build a CSS flexbox layout visually.
Open tool →Banner Generator
Generate a self-contained, responsive HTML banner/ad snippet.
Open tool →Aspect Ratio Calculator
Scale a dimension to keep an aspect ratio, or find the ratio.
Open tool →Color Blindness Simulator
See images and palettes as people with colour vision deficiency do.
Open tool →HEX ⇄ CMYK Converter
Convert colour codes between HEX, RGB and CMYK with a live preview.
Open tool →CSS Grid Generator
Build a CSS Grid layout visually and copy the CSS and HTML.
Open tool →CSS Text Shadow Generator
Design layered text-shadow effects with live preview and copy the CSS.
Open tool →CSS Clip-Path Generator
Create clip-path shapes with draggable points and copy the CSS.
Open tool →Glassmorphism & Neumorphism Generator
Generate CSS for frosted-glass and soft-UI effects with live preview.
Open tool →CSS Animation Generator
Build CSS keyframe animations visually: choose a preset or edit each keyframe, set timing and easing, preview live and copy the code.
Open tool →