Design & CSS Tools
Generators and checkers for visual work: build color palettes and gradients, check contrast for accessibility, and produce ready-to-paste CSS for shadows, borders, layouts and animations.
All 56 design tools
Grouped by what they do.
Color
10 toolsChoose colours and check how they work together.
- Color Palette Generator Press Space for a new palette, lock the colors you like and export them anywhere.
- Tailwind Color Palette Generator (50–950) One brand color in, an 11-step Tailwind shade scale out — with contrast for every shade.
- Color Wheel & Harmony Finder Move a base color around the wheel and get matching colors for any harmony rule.
- UI Color Theme Generator (shadcn, Tailwind, Material 3) Brand color in, full light and dark theme out — every text pair checked for contrast.
- Color Palette from Image Get the main colors of any photo or logo, with how much of the image each one covers.
- Image Color Picker Click any pixel of a photo, logo or screenshot to get its exact color code.
Show all 10 Show fewer Color tools
- Color Contrast Checker (WCAG 2.2) Test text and background colors against WCAG 2.2, then fix them in one click.
- Color Blindness Simulator Preview images and palettes as people with color vision deficiencies may see them.
- Color Difference (Delta E) Calculator Measure how different two colors are with every common Delta E formula.
- Color Temperature (Kelvin) to RGB Converter See what color a light of any temperature is, and how warm or cool a color is.
CSS generators
17 toolsGet ready-to-paste CSS for visual effects and layouts.
- CSS Gradient Generator Drag color stops, blend in OKLCH or sRGB, and copy the CSS — or save it as a wallpaper.
- CSS Box Shadow Generator Stack shadow layers visually and copy clean CSS, a Tailwind class or a whole shadow scale.
- CSS Grid Generator Paint named areas, size the tracks and get responsive CSS grid code, HTML or Tailwind.
- PX to REM Converter px ⇄ rem, em and every CSS length unit — or convert a whole stylesheet at once.
- Glassmorphism CSS Generator Frosted glass over any background, with a text-contrast check that sees through the blur.
- Mesh & Grainy Gradient Generator Drag color points into soft mesh or aurora gradients, add grain, export CSS or 4K images.
Show all 17 Show fewer CSS generators tools
- Background Pattern Generator (CSS & SVG) Fifteen seamless patterns with your colors, size and angle — as CSS, SVG or PNG.
- Neumorphism (Soft UI) Generator Paired light and dark shadows from one base color, with an honest contrast check.
- CSS Clip-Path Generator Draw a clip-path by dragging points, round its corners and wrap text around it.
- CSS Toolkit Four everyday CSS jobs in one place: specificity, validation, media queries and variables.
- CSS Flexbox Generator & Playground Try every flexbox property on live boxes, understand the result and copy the code.
- CSS Text Shadow Generator Stack text-shadow layers on your own words and font, check contrast, copy CSS or Tailwind.
- Cubic Bezier & CSS Easing Generator Shape an easing curve, watch it race the classics and copy CSS, Tailwind or JavaScript.
- CSS Animation & Keyframes Generator Design keyframe animations visually and copy accessible CSS or a Tailwind theme snippet.
- CSS Border Radius Generator Round each corner, or drag eight radii into organic shapes — then copy CSS or Tailwind.
- CSS Loader & Spinner Generator Lightweight loading spinners in one element, accessible and motion-friendly.
- Custom Scrollbar CSS Generator Custom scrollbars that work in every browser, previewed in a scrolling box.
SVG & shapes
7 toolsMake and edit vector shapes and icons.
- PNG to SVG Converter (Image Vectorizer) Trace logos and flat art into clean SVG paths — one colour for cutting, or up to 64.
- SVG Optimizer Shrink SVG icons and illustrations with SVGO — previewed safely, nothing uploaded.
- SVG Wave & Section Divider Generator Make layered waves, curves, tilts and arrows to divide page sections — copy SVG or CSS.
- SVG Blob Generator Generate smooth organic blobs from a seed, fill them, and animate one blob into another.
- SVG Shape Generator (Polygon, Star, Badge) Parametric vector shapes with real rounded corners — as SVG, clip-path or PNG.
- SVG to PDF (Vector) SVG drawings as sharp vector PDF pages — paths, gradients and text kept as vectors.
- Squircle & Smooth Corner Generator Smooth, continuous corners for icons, cards and buttons — as SVG or CSS.
Layout, print & screens
5 toolsGet proportions, sizes and screens right.
- Aspect Ratio Calculator Simplify any width × height to its ratio, or keep a ratio and solve the missing side.
- Paper Size Converter (A4 in Pixels, mm, Inches) Over 100 paper, card and poster sizes in mm, inches, points and pixels at any DPI.
- Social Media Image Size Guide Every platform’s image sizes, with sources — and a check of your own image.
- Book Cover & Spine Width Calculator Spine width, full cover size and a print template for your paperback.
- Printable Grid & Graph Paper Generator Vector graph, dot, isometric, lined and design paper — print at 100% for true scale.
Create graphics
17 toolsMake logos, graphics and image effects.
- Code Screenshot Generator Carbon-style code images with VS Code themes — made in your browser.
- Festival & Business Greeting Poster Maker (India) Diwali, Eid, Pongal and more Indian festivals — with your logo and UPI QR on each post. Pro tool
- Invitation Card Maker (Weddings, Birthdays, Griha Pravesh) Wedding, birthday and house-warming invitations — for WhatsApp and for print. Pro tool
- Logo Maker Make a clean logo from free fonts and icons — SVG and transparent PNG, light and dark. Pro tool
- Graphic Design Editor (Posters, Social Posts, Thumbnails) Make posters, social posts and thumbnails in your browser — autosaved, never uploaded. Pro tool
- Business Card Maker (Print-Ready PDF) Two-sided cards with a logo and QR code — print-ready PDF or a sheet to print at home. Pro tool
Show all 17 Show fewer Create graphics tools
- Screenshot Beautifier & Browser Mockup Turn a plain screenshot into a polished image for posts, docs and launches — no watermark.
- App Icon Generator (iOS, Android, macOS) Every app icon size for Xcode, Android Studio and Google Play from one image.
- Device Mockup Generator Show your app or website on phones, tablets, laptops and watches, in your browser. Pro tool
- T-Shirt & Merch Mockup Generator See your design on t-shirts, hoodies, mugs, bags, caps and phone cases before you print. Pro tool
- Placeholder Image Generator Dummy images in any size, colour and format, made in your browser.
- Flyer & Poster Maker (shop offers, admissions, hiring, events) Business flyers and posters with your logo and QR code — print-ready, no watermark. Pro tool
- Open Graph & Social Share Image Generator Link-preview images with auto-fitting text and crop checks for each platform.
- Photo to Pixel Art Converter Pixelate a photo into real pixel art with retro palettes and dithering — in your browser.
- Pixel Art Maker A free pixel art editor with layers, frames and onion skin — saved in your browser.
- Property Listing Flyer & Brochure Maker Listing flyers, brochures and WhatsApp posts with RERA numbers and carpet area. Pro tool
- Letterhead Maker (PDF and Word Header/Footer) Your company letterhead as a vector PDF and a Word template with a real header and footer.
No design tools match these filters.
Choose “Anything” in one of the filters, or look across every category on All tools.
Design tools A–Z
B
C
- Code Screenshot Generator
- Color Blindness Simulator
- Color Contrast Checker (WCAG 2.2)
- Color Difference (Delta E) Calculator
- Color Palette from Image
- Color Palette Generator
- Color Temperature (Kelvin) to RGB Converter
- Color Wheel & Harmony Finder
- CSS Animation & Keyframes Generator
- CSS Border Radius Generator
- CSS Box Shadow Generator
- CSS Clip-Path Generator
- CSS Flexbox Generator & Playground
- CSS Gradient Generator
- CSS Grid Generator
- CSS Loader & Spinner Generator
- CSS Text Shadow Generator
- CSS Toolkit
- Cubic Bezier & CSS Easing Generator
- Custom Scrollbar CSS Generator
F
P
S
Collections with design tools
All collections →- 197 tools Developers JSON, YAML & data formats · Format, convert & run code · Encode, decode & hash · 5 more
- 118 tools Creators & social media Posts, captions & hashtags · YouTube · Images & graphics · 3 more
- 174 tools Students Grades, marks & exams · Essays & writing · Citations & references · 4 more
- 107 tools Small business & tax Invoices & billing · GST, VAT & tax · Pricing, profit & stock · 4 more
Good to know
- All 56 tools run in your browser: what you open or paste is not uploaded.
- 53 of 56 keep working without a connection once loaded.
- Code Screenshot Generator: The syntax highlighter (Shiki, with a WebAssembly regex engine of about 470 KB) is downloaded from this site when the page opens, and each language grammar and theme the first time you pick it; your code is never uploaded.
- Logo Maker: The font engine (about 320 KB) and each font you pick (up to about 45 KB) are downloaded from this site the first time they are needed, and the full icon list (about 150 KB) when you first search it. Your logo is made on your device; nothing is uploaded.
- Business Card Maker (Print-Ready PDF): Downloads the card fonts from this site the first time you use them; your details never leave your device.
- Results are estimates for planning and learning, not legal advice. Check the method and assumptions on each tool’s page.
Other categories
All tools →- 132 tools Developer Format, validate, encode, decode.
- 40 tools Data CSV, Excel, tables, charts.
- 95 tools Text Count, clean, sort, compare.
- 92 tools Image Compress, resize, convert, crop.
- 55 tools PDF Merge, split, extract, convert.
- 35 tools Audio & Video Convert, trim, compress media.
- 36 tools SEO Meta tags, sitemaps, schema.
- 27 tools Social Media Captions, previews, limits.
- 94 tools Finance Loans, savings, interest, tax.
- 78 tools Business Invoices, quotes, margins.
- 39 tools Legal Templates and legal maths.
- 48 tools Health BMI, calories, pregnancy.
- 51 tools Math Calculators and solvers.
- 45 tools Science Physics, chemistry, astronomy.
- 31 tools Engineering Electronics, electrical, mechanical.
- 29 tools Construction Materials, area, home costs.
- 80 tools Education Grades, citations, study.
- 36 tools Network DNS, headers, IPs, subnets.
- 35 tools Security Passwords, encryption, keys.
- 33 tools Converters Every unit, exact factors.
- 75 tools Utility Convert, count down, randomise.