Free Tools for
Web Designers & Developers

🧊

Box Shadow Generator

Design layered CSS box shadows with real-time controls for offset, blur, spread, colour and opacity.

Open tool →

🎨

Color Palette Collections

Browse curated colour palettes for web design, UI, and branding. Copy hex codes instantly.

Open tool →

🖌️

Color Palette Generator

Generate harmonious palettes — complementary, triadic, analogous — with hex and CSS variables.

Open tool →

🎯

Color Picker

Pick any colour and get hex, RGB, HSL, and CSS variable output instantly.

Open tool →

🎞️

CSS Animation Generator

Build CSS keyframe animations visually. Preview live and export clean @keyframes code.

Open tool →

🔘

CSS Button Generator

Style custom buttons with gradients, borders, shadows, and hover effects. Production-ready CSS.

Open tool →

📦

CSS Flexbox Generator

Build flexbox layouts visually. Adjust align, justify, wrap, and direction with live output.

Open tool →

🔁

CSS Framework Converter

Convert between Tailwind, Bootstrap, and plain CSS. Migrate your styles instantly.

Open tool →

🌈

CSS Gradient Generator

Create linear, radial, and conic CSS gradients visually with live preview and instant code output.

Open tool →

📉

CSS Minifier

Compress CSS for production or beautify minified CSS for editing. Shows live compression ratio.

Open tool →

📚

CSS Snippets Library

Browse and copy ready-to-use CSS snippets for common UI patterns, effects, and layouts.

Open tool →

🔤

Google Fonts Pairing Guide

Discover beautiful font pairings from Google Fonts. Preview combinations live on real text.

Open tool →

🎨

HTML Color Names

Complete reference of all 140+ CSS named colours with hex, RGB values, and copy buttons.

Open tool →

📏

PX → REM Converter

Convert pixel values to rem units. Set your base font size and convert entire lists at once.

Open tool →

⭐

SVG Icon Pack

Free SVG icons for web projects. Browse, customise colour and size, then copy or download.

Open tool →

🌊

SVG Wave Generator

Generate smooth SVG wave dividers for section backgrounds. Adjust amplitude, frequency, and colour.

Open tool →

🔠

Typography Scale Generator

Build a modular type scale for your project. Choose ratio, base size, and get CSS custom properties.

Open tool →

🧿

Favicon Generator

Generate favicons in all sizes from an image or text. ICO, PNG, Apple Touch Icon — all in one click.

Open tool →

🗜️

Image Compressor

Compress JPG, PNG, and GIF images in your browser. Reduce file size without losing quality.

Open tool →

📐

Image Resizer

Resize images to exact dimensions or by percentage. Maintain aspect ratio or set custom size.

Open tool →

🖼️

Image to WebP Converter

Convert JPG, PNG, GIF to WebP for smaller files and faster page loads. 100% browser-based.

Open tool →

🔒

Privacy Policy Generator

Generate a GDPR & CCPA compliant privacy policy for your website or app in under 60 seconds.

Open tool →

💰

Refund Policy Generator

Generate a clear refund and return policy for your e-commerce store or SaaS product instantly.

Open tool →

📜

Terms & Conditions Generator

Create comprehensive terms and conditions tailored to your website type and jurisdiction.

Open tool →

🏷️

Meta Tag Generator

Generate complete meta tags — SEO, Open Graph, Twitter Cards, canonical, robots — with live Google preview.

Open tool →

🔗

Open Graph Preview

See exactly how your page looks when shared on Facebook, Twitter/X, LinkedIn, and WhatsApp.

Open tool →

🤖

Robots.txt Generator

Control which pages search engines crawl and index. Generate a proper robots.txt with custom rules.

Open tool →

📊

Schema Markup Generator

Build structured data for Articles, Products, FAQs, LocalBusiness, and Events. Boost Google rich results.

Open tool →

🗺️

Sitemap XML Generator

Fetch your website, extract all internal links, and generate a valid sitemap.xml for Google Search Console.

Open tool →

🔐

Base64 Encoder / Decoder

Encode text or files to Base64 and decode Base64 strings back to plain text instantly.

Open tool →

🆚

Diff Checker

Compare two blocks of text or code side-by-side. Highlights added, removed, and changed lines.

Open tool →

📝

Form Builder

Build HTML forms visually by dragging and dropping fields. Generates clean, accessible HTML output.

Open tool →

⚙️

.htaccess Generator

Force HTTPS, www redirects, enable GZIP, set caching headers, block bad bots — simple toggle UI.

Open tool →

🧪

HTML CSS Playground

Write and preview HTML, CSS, and JS live in the browser. No setup, no account required.

Open tool →

📄

HTML Formatter

Paste minified HTML and get clean, indented, syntax-highlighted output. Supports minify mode.

Open tool →

🧩

JS / TS Formatter

Format and beautify JavaScript and TypeScript. Detects syntax errors and lint issues in real time.

Open tool →

🔁

JS to TS Converter

Convert JavaScript files to TypeScript automatically. Adds type annotations and interfaces.

Open tool →

🗂️

JSON Formatter & Validator

Format, validate, and explore JSON with syntax highlighting, tree view, error location, and minification.

Open tool →

💻

Live Code Editor

Full-featured browser code editor with live preview. Supports HTML, CSS, and JavaScript.

Open tool →

📜

Lorem Ipsum Generator

Generate placeholder text in paragraphs, sentences, or words. Classic Lorem Ipsum or random text.

Open tool →

✍️

Markdown Editor

Write Markdown and see a live HTML preview side-by-side. Export to HTML when done.

Open tool →

🛢️

MySQL Query Validator

Validate and check MySQL queries for syntax errors before running them on your database.

Open tool →

🔑

Password Generator

Generate strong, random passwords with custom length, symbols, numbers, and case options.

Open tool →

🐘

PHP to Laravel Converter

Convert plain PHP code to Laravel-style code. Migrate to Eloquent, routes, and blade templates.

Open tool →

📱

QR Code Generator

Generate QR codes for URLs, text, or contact info. Download as PNG or SVG instantly.

Open tool →

🔎

Regex Tester

Test regular expressions live with real-time match highlighting, capture group breakdown, and cheat sheet.

Open tool →

🌐

URL Encoder / Decoder

Encode and decode URLs and URI components. Handles special characters, spaces, and query strings.

Open tool →

⟨/⟩

HTML Cheat Sheet

Complete HTML reference with all tags, attributes, and examples. Bookmark for daily use.

View sheet →

{}

CSS Cheat Sheet

CSS selectors, properties, flexbox, grid, and media queries — all in one reference.

View sheet →

JS

JavaScript Cheat Sheet

ES6+ syntax, array methods, DOM manipulation, async/await, and common patterns reference.

View sheet →

TS

TypeScript Cheat Sheet

Types, interfaces, generics, utility types, and TypeScript-specific patterns at a glance.

View sheet →

▲

Next.js Cheat Sheet

App Router, routing, data fetching, SSR/SSG, hooks, and Next.js config reference.

View sheet →

B

Bootstrap Cheat Sheet

Bootstrap grid, utility classes, component markup, and breakpoint reference in one place.

View sheet →

🌊

Tailwind CSS Cheat Sheet

Tailwind utility classes — layout, spacing, typography, colours, and responsive breakpoints.

View sheet →

🎨

UI/UX Cheat Sheet

Design principles, heuristics, common UI patterns, and accessibility checklist for designers.

View sheet →

📝

Blog & Tutorials

In-depth articles on CSS, JavaScript, SEO, and web performance. Written for developers.

Read more →

🔖

Bookmarks

Curated links to the best free tools, resources, and references across the web design ecosystem.

Browse →

⚖️

Comparisons

Side-by-side comparisons of CSS frameworks, tools, and techniques to help you choose wisely.

Explore →

🎨

CSS Reference

Complete CSS property reference — syntax, values, examples, and browser compatibility.

Browse →

🚨

Error Reference

HTTP status codes, JavaScript errors, and CSS debugging — causes, fixes, and code examples.

Browse →

📖

How-To Guides

Step-by-step CSS, JavaScript, and HTML guides — sticky headers, dark mode, fetch API, and more.

Browse →

⬇️

Free Downloads

Free PDF cheat sheets, templates, and reference guides. Download once, use forever.

Download →