Free Online Design Tools
Create color palettes, gradients, effects, icons, and visual UI components with instant code export — no design software required.
Color Picker
HEX · RGB · HSL · OKLCHPick any color and convert instantly between HEX, RGB, HSL, HSV, OKLCH, and CMYK. Smart paste, WCAG contrast ratios, copy any format.
Color Palette Generator
Harmony-based palettesGenerate harmonious color palettes from any base color. Monochromatic, analogous, complementary, triadic, shades & more. Export CSS vars, Tailwind, Hex, HSL, SCSS.
Color Contrast Checker
WCAG AA & AAA complianceCheck foreground/background color contrast ratio against WCAG 2.1 AA and AAA. Live preview for text, large text, and UI components. Suggested fix when you fail.
Gradient Generator
CSS gradient builderBuild CSS linear, radial, and conic gradients visually. Color stop editor, presets, and CSS/Tailwind export.
Glassmorphism Generator
Frosted glass effect builderBuild CSS glassmorphism effects visually — blur, transparency, saturation, border, shadow. 8 presets, image upload, Tailwind & React export.
Mesh Gradient Generator
SVG mesh gradient builderCreate smooth, organic mesh gradients with draggable color blobs. Export as SVG, PNG, or CSS radial-gradient code.
Box Shadow Generator
CSS shadow studioMulti-layer CSS box shadow studio with neumorphism presets. Export CSS, Tailwind, JS, or SCSS.
CSS Button Generator
Gradient, neon, glass, 3D buttonsCreate beautiful CSS buttons with live preview. 16 presets including gradient, glassmorphism, neumorphism, neon glow, 3D, outlined. Export CSS, SCSS, React JSX, Tailwind.
Font Pairing Tool
Google Font combinationsDiscover curated Google Font combinations with live preview. Adjust heading and body sizes with CSS export.
SVG Animation Generator
CSS, SMIL & GSAPAnimate SVG shapes with CSS, SMIL, or GSAP. 50+ presets — rotate, bounce, draw stroke, marching ants, orbit. Download as SVG or HTML.
Animated SVG Icons
Pure SVG icon library105+ animated SVG icons — checkmarks, arrows, loaders, hearts, bells, and more. Customize color, stroke, speed. Export SVG, JSX, or HTML.
OG Image Generator
Open Graph preview cardsGenerate 1200×630 Open Graph images for Twitter, Facebook, LinkedIn & Slack. 5 templates, custom colors, font, and logo upload. Download PNG free, no sign-up.
Carousel Builder
HTML · CSS · JS · ReactBuild a responsive carousel visually and export clean HTML, CSS, JavaScript, or a React component. Slide & fade transitions, arrows, dots, autoplay, accent color, and more.
CSS Shape Generator
37 shapes · 7 exportsGenerate pure CSS for 37 shapes — triangles, arrows, stars, hearts, hexagons, speech bubbles and more. Customize color, size, rotation. Export as CSS, HTML, React, Tailwind, SCSS, Styled-Components, or Vue.
About Design Tools
Design tools bridge the gap between visual design decisions and production-ready code. Each tool outputs CSS, SVG, or JSX so you can go directly from idea to implementation without leaving the browser.
Color: Color Picker converts between HEX, RGB, HSL, HSV, OKLCH, and CMYK with WCAG contrast ratios. Color Palette Generator creates harmonious palettes in monochromatic, analogous, complementary, triadic, and split-complementary schemes with CSS variable, Tailwind, and SCSS export. Color Contrast Checker verifies WCAG 2.1 AA and AAA compliance for any color pair. Gradients & effects: Gradient Generator builds linear, radial, and conic gradients with a color-stop editor. Mesh Gradient Generator creates organic gradients with draggable blobs, exportable as SVG, PNG, or CSS. Glassmorphism Generator builds frosted-glass card effects with blur, transparency, border, and shadow controls. Box Shadow Generator is a multi-layer shadow studio with neumorphism presets. Typography: Font Pairing Tool shows curated Google Font combinations with live heading and body text preview. SVG & icons: SVG Animation Generator animates shapes with CSS, SMIL, or GSAP (50+ presets). Animated SVG Icons provides 105+ ready-to-use animated icons with color and speed controls. UI components: CSS Button Generator creates gradient, neon, glassmorphism, 3D, and neumorphism buttons. Carousel Builder produces responsive sliders with clean HTML, CSS, JS, or React export. CSS Shape Generator covers 37 pure CSS shapes.
Frequently Asked Questions
- Can I export color palettes to Tailwind CSS?
- Yes. The Color Palette Generator exports palettes in five formats: CSS custom properties, Tailwind configuration object (for tailwind.config.js), SCSS variables, a hex list, and an HSL list. It generates 10-shade scales per hue (50 through 950) compatible with Tailwind's default shade naming convention.
- How does the Font Pairing Tool work?
- The Font Pairing Tool shows curated combinations of two Google Fonts — one for headings, one for body text — with a live preview of paragraph and heading text at adjustable sizes. You can browse combinations by mood (modern, classic, editorial), toggle dark/light mode, and export the Google Fonts link tag and CSS font-family declarations.
- What animation types does the SVG Animation Generator support?
- The SVG Animation Generator supports three animation approaches: pure CSS keyframes, SMIL (SVG native animation), and GSAP (GreenSock). It includes 50+ presets across categories like rotate, bounce, draw stroke, marching ants, orbit, pulse, wave, and morph. Download as an .svg file (for CSS/SMIL) or an .html file (for GSAP, which requires the library).
- Are the Animated SVG Icons free to use in projects?
- Yes. The 105+ icons in the Animated SVG Icons library are free for use in commercial and personal projects. Export individual icons as raw SVG code, JSX (for React), or a self-contained HTML snippet. Each icon is customisable for color, stroke width, and animation speed.
- What button styles does the CSS Button Generator include?
- The CSS Button Generator includes 16 preset button styles: gradient, solid, outlined, glassmorphism, neumorphism, neon glow, 3D press, soft shadow, retro border, pill, icon+text, loading spinner, ripple effect, dark glass, animated border, and split color. Export as plain CSS, SCSS, React JSX, or Tailwind with hover and active states included.