Free Design Tools
Create colour palettes, gradients, shapes, buttons and social images for your website or brand, then copy the code or download the file. No design software needed.
12 free toolsNo sign-upNo watermarks
Which tool do I need?
- Build a colour palette and check contrastColor Palette & Contrast Checker →
- Make a CSS gradient backgroundCSS Gradient Generator →
- Design a button with a hover effectCSS Button Generator →
- Add soft shadows to cardsBox Shadow Generator →
- Create blob, star or polygon shapesBlob & Shape Generator →
- Add wave dividers between sectionsSection Divider Generator →
- Make a logo badge or sealLogo Badge & Seal Maker →
- Create a social share imageSocial Share Image Maker →
All Design Tools
Color Palette & Contrast Checker
Build colour palettes from one colour or a photo, and check text contrast against WCAG.
Social Share Image Maker
Design 1200×630 share images for Facebook, LinkedIn and X, plus Instagram sizes.
Image Cropper
Crop, rotate and flip images to any shape, with presets for social media.
CSS Gradient Generator
Create linear, radial and conic gradients visually and copy the CSS.
Blob & Shape Generator
Make organic blobs, stars, rounded polygons and flowers. Download SVG or PNG, or copy the CSS.
Section Divider Generator
Create wave, curve, slant and zigzag dividers between website sections, with copy-ready code.
CSS Clip-path Generator
Cut images and boxes into any shape by dragging points, with presets and copy-ready CSS.
Box Shadow Generator
Design soft, layered, glow and neumorphism shadows and copy the CSS.
CSS Button Generator
Design buttons with colours, gradients, borders and hover effects. Copy the HTML and CSS.
SVG Optimizer
Shrink SVG files from Illustrator, Figma or Inkscape, with a before and after preview.
Favicon from Text or Emoji
Make a favicon from your initials or an emoji, with ICO, SVG and PNG files.
Logo Badge & Seal Maker
Design round, shield, hexagon and seal badges with your text. Download PNG or SVG.
Copy-ready code
Every CSS tool gives you clean code to paste into your site, WordPress or Elementor.
Live preview
See every change instantly, exactly as it will look.
Free for commercial use
Use what you create on client sites, logos and print.
Frequently asked questions
Can I use the designs commercially?
Yes. Everything you create is yours to use on websites, apps, logos and print, with no attribution needed.
Do I need to know CSS?
No. Design visually with sliders and presets, then copy the code. Each tool explains where to paste it.
Do these work with WordPress and Elementor?
Yes. Paste the CSS into Additional CSS or a Custom HTML block.