10 essential design tools: colour palette generator, gradient generator, font pairings, contrast checker, image resizer, SVG editor, wireframe templates, CSS shadow generator, border radius tool, favicon generator.
Creating beautiful designs requires the right tools. Our free design toolkit helps web designers, UI/UX professionals, and graphic artists generate colour palettes, create gradients, test font combinations, check accessibility, and more — all without any signup or cost.
The colour palette generator creates harmonious 5-colour palettes from any base colour — perfect for brand identity, website themes, or UI design. Our gradient generator allows you to create custom CSS gradients with adjustable angles and colours, with instant code copying for your projects. The contrast checker tests text and background colour combinations against WCAG accessibility standards — essential for inclusive design.
Choosing the right fonts is critical for readability and brand personality. Our font pairings tool showcases tested Google Font combinations like Playfair Display with Source Sans Pro, and Montserrat with Merriweather. Each pairing includes heading and body font suggestions with visual previews — saving you hours of trial and error.
The image resizer helps you preview and resize images while maintaining proportions. Our SVG editor allows you to create and edit basic vector shapes (circles, rectangles, triangles) with live code preview — great for quick icons or learning SVG syntax. The wireframe templates provide quick layout structures for web pages and mobile apps to kickstart your design process.
Front-end developers will appreciate our CSS shadow generator for creating realistic box shadows with real-time preview, and the border radius tool for customising corner curves on any element. The favicon generator creates browser tab icons from text or emoji with ready-to-use HTML code.
All tools process locally in your browser — no images or data are uploaded to any server. Bookmark this page for quick access during your next design project.
Generate beautiful colour palettes from a base colour.
Create custom CSS gradients with multiple stops.
Discover perfect Google Font combinations for your projects.
Check WCAG contrast ratios between text and background.
Resize images and get dimensions in pixels.
Create and edit basic SVG shapes with code preview.
Quick wireframe templates for web and mobile designs.
Generate box shadow CSS code with real-time preview.
Create custom border radius for elements.
Generate favicon code from text or emoji.