Design Tools - UI & Graphic

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

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

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

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

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

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

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

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

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

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

New

Glitch Image Effect Generator – RGB Split & Scan Lines

Add a digital glitch effect to your image with RGB channel shifting, scan lines, and block displacement. Perfect for cyberpunk and vaporwave styles.

Design effect glitch image RGB tool

New

Duotone Image Effect – Spotify‑Style Two‑Color Filter

Transform any photo into a stylish duotone using two custom colors. Adjust intensity and blend mode for a modern, graphic design aesthetic.

Design duotone effect filter image tool

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

New

Posterize Image Online – Reduce Color Palette with Levels

Create a posterized effect by limiting the number of colors in an image. Adjust the level of posterization for a pop‑art or vintage look directly in your browser.

Design color effect image posterize tool

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

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

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

What Font is Used on a Website - Online Detector

Enter a URL and extract the font stacks and web font URLs used on that page. Quick typography research.

Design detector font reference website

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

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

CMYK to Pantone Converter - Online Approximate Match

Enter CMYK values and find the closest Pantone Solid Coated color. For print design reference. Client‑side lookup.

Color Tool CMYK converter Pantone print

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Font Fallback Checker - Online See Missing Glyphs

Type any character and see how it renders in different font stacks. Detect missing glyphs and fallback behavior.

Design checker fallback font typography

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

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

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 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

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

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

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

Image Blend Mode Tester - Online Overlay Two Photos

Upload two images and apply CSS blend modes (multiply, screen, overlay, etc.). See the result and copy the filter CSS. Pure frontend.

Design blend CSS images overlay

Pangram Viewer - Online See Fonts with Sentences

Choose a font family and see how it renders famous pangrams (The quick brown fox…). Instant web font loader.

Design font pangram typography viewer