Design Tools - UI & Graphic

New

User Journey Map Maker – Simple UX Template Online

Build a visual user journey map with stages, actions, emotions, and pain points. A lightweight tool for UX designers and product managers to align teams.

Business mapping template user journey UX

New

Design Token Generator – Export Colors, Spacing & Typography

Define and export design tokens for your project. Choose colors, spacing, and fonts, then download as CSS custom properties, JSON, or SCSS variables.

Design CSS variables design tokens generator theme

New

3D eBook Cover Mockup Generator – Flat Image to Book

Upload a flat cover image and the tool wraps it onto a 3D book model. Rotate the book and download a realistic screenshot for marketing.

Design cover ebook mockup

New

Brand Color Extractor – Get Palette from a Logo Image

Upload a company logo and the tool clusters the dominant colors. Get a ready‑to‑use brand palette with hex codes and suggested accent colors.

Branding extractor logo palette

New

Full‑Page Website Screenshot Tool – Enter URL, Get PNG

Enter a public URL and capture a full‑length PNG screenshot of the entire page. No install needed, processed in the cloud.

Design full page screenshot URL

Solarize Image Effect – Retro Darkroom Look Online

Apply a solarization (Sabattier) effect to any image, inverting tones above a threshold for a surreal, metallic retro look. No downloads needed.

Design effect image retro solarize tool

Font Mood Matcher – Find Fonts by Emotion & Style

Choose a mood (elegant, playful, modern, classic) and see a curated list of free Google Fonts that match. Copy the @import code for immediate use.

Design design font mood style tool

All‑In‑One Favicon Generator – ICO, PNG & Apple Touch Icons

Upload an image and get favicons in every size: 16x16, 32x32, 180x180, and 192x192. Also generates the site.webmanifest and HTML tags.

Design Apple favicon generator ICO

Custom Lorem Ipsum Generator – Words, Sentences & Paragraphs

Generate dummy text with precise control: number of paragraphs, sentences per paragraph, and words per sentence. Also choose between Lorem Ipsum and random English.

Design generator lorem ipsum placeholder

Advanced Color Contrast Matrix – Test All Pairs in Palette

Paste a list of hex colors and see a grid showing the contrast ratio for every combination. Instantly identifies which pairs pass WCAG AA/AAA.

Accessibility checker contrast matrix WCAG

Typing Effect Text Generator – Animated HTML & CSS Snippet

Type your message and get a self‑contained HTML/CSS snippet that animates a typing cursor. Customize speed, blink rate, and text color.

Design CSS generator snippet typing effect

Grid Overlay Tester – Overlay Custom Grids on Live Sites

Enter a URL and apply a custom CSS grid overlay to check alignment. A quick frontend design tool for verifying column placement and baseline grids.

Design CSS grid layout overlay tool

Custom Keyboard Layout Visualizer for Touch Typing

Design a custom keyboard layout and save it as an image to help learn touch typing on a custom keymap. Supports ANSI, ISO, and ortho layouts.

Design keyboard layout tool touch typing visualizer

Live Website Color Blindness Simulator – Enter URL

Enter any live URL and view it through eight different color vision deficiency filters. Identify contrast issues and improve your site’s accessibility.

Accessibility accessibility color blindness live simulator

Viewport Meta Tag Simulator - Online Test Mobile Rendering

Change the viewport meta tag and see how a page would render at different device widths. Understand responsive basics.

Design meta mobile simulator viewport

Swatch Match Finder - Online Find Images Matching a Palette

Pick a color palette and the tool shows sample images that match it. Great for moodboard and brand inspiration. Static dataset.

Color Tool image moodboard palette swatch

Media Query Live Tester - Online Resize & See Results

Write a media query and see if it matches as you resize the iframe. Understand width, height, and resolution queries.

Design live media query responsive test

Element Blend Mode Tester - Online See mix-blend-mode

Overlay colored blocks and images and apply all mix‑blend‑mode values. Understand how each mode works live.

Design CSS demo mix-blend-mode overlay

shape‑margin & clip‑path Text Wrap - Online Magazine Layout

Float an image and wrap text around a non‑rectangular shape. Adjust shape‑margin. Copy the CSS. For magazine‑style web.

Design CSS layout shape‑margin text wrap

UI Design Prompt Generator - Online Practice Ideas

Get a random UI challenge (e.g., 'Design a checkout flow for a plant shop') to practice your skills. All local.

Design challenge design prompt UI

font‑palette CSS Playground - Online Color Fonts Explorer

Pick a COLRv1 color font and change its palette with font‑palette. Create custom palettes with @font‑palette‑values.

Design color font COLRv1 CSS font‑palette

Image to CMYK Color Separation - Online Print Preview

Upload an image and see the cyan, magenta, yellow, and black plates as separate grayscale images. Pre‑press tool.

Design CMYK image print separation

Dark Mode Toggle Demo - Online Respect System Preference

Implement a dark/light theme toggle that respects prefers‑color‑scheme. Copy the complete JavaScript and CSS.

Design dark mode demo system toggle

CSS Snowfall Effect Generator - Online Winter Animation

Customize falling snow particles with pure CSS or canvas. Adjust speed, size, and wind. Copy the code for your website.

Design animation CSS generator snowfall

Taxonomy Term Generator - Online Card Sorting Helper

Brainstorm information architecture: enter a parent term and generate child terms and related concepts. Quick idea list.

Design generator IA taxonomy term

Soft Proofing Simulator - Online Simulate Print Colors

Assign an ICC profile to an image and simulate how it would look on another device. For accurate color workflows. Local.

Design color profile simulate soft proof

Color to Emotion Visualizer - Online Interactive Wheel

Click colors on an interactive wheel and see the common emotions and meanings associated with them. A design resource.

Color Tool color emotion design psychology wheel

CSS Variable Theme Builder - Online Light & Dark Mode

Define a set of colors for light and dark themes. Get the CSS custom properties snippet. Toggle live.

Design CSS variables dark mode generator theme

Responsive Design Emulator - Online Test All Device Sizes

See your website inside iframes at multiple breakpoints simultaneously. Side‑by‑side responsive testing.

Design emulator responsive testing viewport

Google Fonts Pairing Suggestions - Online Visual Tester

Select a heading font and see a set of well‑paired body fonts. Live preview with your own text. Copy the import code.

Design Google Fonts pairing preview typography

Local Font Viewer & Preview - Online Test Styles

Browse the fonts installed on your system and type a custom phrase to see how it looks. Uses Local Font Access API where available.

Design CSS local fonts preview viewer

CSS UI Pattern Library - Online Copy‑Paste Components

Browse a collection of common UI components (cards, modals, navbars) built with pure CSS. Preview and copy the HTML/CSS. Fast prototyping.

Design components CSS patterns UI

Random Favicon Color Palette - Online Instant Brand

Generate a harmonious three‑color palette with a matching simple favicon shape. Perfect for quick project identity. All local.

Design brand favicon generator palette

Empathy Map Creator – Online UX Design Thinking Tool

Fill in says, thinks, does, feels quadrants for a user persona. Save locally or print.

Business Tools design empathy map UX

Hebrew Dummy Text Generator - Online Placeholder for RTL

Get placeholder text in Hebrew for testing right‑to‑left layouts. Generate paragraphs, sentences, or words.

Design Hebrew ipsum placeholder RTL

Print Contrast Simulator - Online See How It Looks on Paper

Upload an image and see a rough simulation of how it might look when printed. Highlights areas that may lose detail.

Design contrast image print simulator

Clip Path Playground - Online Interactive CSS Shapes

Drag points to create a custom clip‑path shape. See the CSS value update live. For creating non‑rectangular elements.

Design clip‑path CSS playground shape

Legal Ipsum Text Generator - Online Fake Terms & Conditions

Create realistic‑looking legal and contract placeholder text. Perfect for designing terms‑of‑service layouts.

Design dummy ipsum legal placeholder

Color Trend Inspector - Online Pick Year & See Palette

See the Pantone Colors of the Year and popular palettes from past years. Get hex codes. Design inspiration.

Color Tool color trend design palette year

Abstract Geometric Icon Generator - Online Random SVG

Click to get a randomly generated unique abstract icon (geometric pattern). Download as SVG. For placeholder avatars and designs.

Design abstract generator icon SVG

CSS Filter Functions Playground - Online Visual Adjustments

Chain multiple CSS filter functions and see the result on an image. Copy the filter string. No upload.

Design brightness contrast CSS filter playground

CSS Mask Parallax Demo - Online Scroll Reveal Effect

Use CSS masks and fixed backgrounds to create a unique parallax reveal effect. Copy the code. No JavaScript.

Design CSS mask demo parallax scroll

Background‑Blend‑Mode Explorer - Online Layer Patterns

Stack multiple background images and blend them with colors. Create unique textures. Copy the CSS code instantly.

Design background‑blend‑mode CSS pattern texture

Color Harmony Picker - Online Complementary Split‑Comp

Choose a base color and see its complementary, split‑complementary, triadic, and tetradic harmonies. Copy palettes. Local.

Color Tool color harmony complementary design picker

Text Over Image Blend Mode Generator - Online CSS Art

Place bold text over an image and apply mix‑blend‑mode: screen, multiply, etc. Create stunning hero sections. Download preview.

Design CSS image mix‑blend‑mode text

Crystal Grid Layout Maker - Online Sacred Geometry Tool

Design a crystal grid by placing crystals on a sacred geometry template. Add notes. Screenshot your layout. Spiritual/art.

Design crystal grid layout sacred geometry

Fake User Persona Generator - Online UX Placeholder

Create a realistic‑looking user persona card with a name, photo placeholder, quote, and demographics. Perfect for design projects.

Design design generator persona UX

Random Favicon Generator - Online One‑Click Icon

Click to get a randomly generated, unique favicon. Download as .ico or SVG. For when you need a quick icon.

Design favicon generator icon random

Image CMYK Simulation - Online See Print Preview

Upload an RGB image and simulate how it might look when printed in CMYK. See out‑of‑gamut warnings. Pre‑press helper.

Design CMYK image print simulation

Text Scramble Effect - Online Decoding Animation

Animate text that looks like it's being decoded or scrambled before settling on the final word. Copy the JS snippet.

Design animation effect JavaScript text scramble

Touch Feedback Generator - Online Haptic & Visual Cue

Preview different touch feedback patterns (scale, color, ripple) for mobile buttons. Copy the CSS and HTML. Improve mobile UX.

Design CSS feedback haptic touch

Abstract Icon Generator - Online Random Geometric Shapes

Click to get a randomly generated, unique abstract icon (geometric pattern). Download as SVG. For placeholder avatars and designs.

Design abstract generator icon SVG

Random CSS Animation Library - Online Copy Button Effects

Browse a curated set of button hover animations. See each effect live and copy the CSS. Minimalist collection.

Design button CSS animation hover library

CSS Scroll Snap Demo - Online Carousel & Gallery

Build a horizontal scroll‑snap container with configurable snap‑type and alignment. Perfect for image galleries.

Design carousel CSS demo scroll snap

CMYK Color Preview - Online See Print vs Screen

Preview how a CMYK value will look on screen (approximate). Compare with its RGB equivalent. Pre‑press check.

Color Tool CMYK color preview print

Responsive Breakpoint Tester - Online Drag Viewport Width

Enter a URL and drag a slider to change the viewport width smoothly. See exactly where your layout breaks. No iframe limits.

Design breakpoint responsive tester viewport

3D Perspective Box Drawer - Online Isometric Cube Tool

Draw a 3D box or room interior by dragging vanishing points. Great for learning perspective drawing. Export as image.

Design 3D cube drawing perspective

Square Foot Garden Planner - Online Layout & Companion

Design a square foot garden by dragging vegetables into a grid. See companion planting warnings and spacing tips. Print plan.

Design garden planner square foot vegetable

Color Harmony Chooser - Online Complementary & Triadic

Find complementary, triadic, analogous, and split-complementary color combinations. Interactive color wheel. Essential for UI design.

Color Tool color harmony complementary design triadic

UI Animation Timing Demo - Online Easing Presets

Compare all CSS easing presets side by side on a bouncing ball. See which curve fits your UI animation.

Design animation demo easing UI