UD5 Toolkit
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 Tools - UI & Graphic
78+ toolsFont Fallback Checker - Online See Missing Glyphs
Type any character and see how it renders in different font stacks. Detect missing glyphs and fallback behavior.
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.
Lighting Diagram Creator - Online Studio Setup Planner
Drag and drop light sources, camera, and subject to plan a photo shoot. Export diagram as image. Simple and visual.
Online Screen Ruler - Measure Pixels & Inches on Screen
An onâscreen ruler that measures in pixels, centimeters, and inches. Drag to resize. Handy for UI designers and developers.
Golden Ratio Calculator - Online Find Balanced Proportions
Enter a number to find its golden ratio long and short segments. Use for pleasing design layouts. Instant.
Perspective Grid Generator - Online Drawing Reference
Create 1-point, 2-point, or 3-point perspective grids. Adjust vanishing points and grid spacing. Useful for artists and architects.
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.
Responsive Design Tester - Online Viewport Emulator
Preview any website inside emulated device viewports (iPhone, iPad, various resolutions). No screenshot, live interaction in an iframe. Local tool.
Font Size Scale Preview - Online Typography Visualizer
Type a few words and see them rendered at every heading size (h1âh6) with your chosen font. Perfect for design systems.
Quilt Pattern Previewer - Online Fabric Layout Visualizer
Arrange virtual fabric squares or triangles on a grid to preview a quilt pattern. Change colors and sizes. Export layout.
Font Pairing Suggestions - Online Google Fonts Recommender
Select a heading font and get recommended body font pairings. Live preview with sample text. Copy the CSS import links.
Seating Chart Maker - Online Drag & Drop Desks
Create a simple seating chart by dragging desk icons and assigning names. Print or screenshot. Perfect for teachers.
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.
Analog Clock Face Generator - Online Custom Watch Design
Design a custom analog clock face by choosing colors, hands, and numbers. Download as SVG or PNG. For craft or UI design.
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.
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.
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 Harmony Chooser - Online Complementary & Triadic
Find complementary, triadic, analogous, and split-complementary color combinations. Interactive color wheel. Essential for UI design.
CSS Scroll Snap Demo - Online Carousel & Gallery
Build a horizontal scrollâsnap container with configurable snapâtype and alignment. Perfect for image galleries.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Color Harmony Picker - Online Complementary SplitâComp
Choose a base color and see its complementary, splitâcomplementary, triadic, and tetradic harmonies. Copy palettes. Local.
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.
BackgroundâBlendâMode Explorer - Online Layer Patterns
Stack multiple background images and blend them with colors. Create unique textures. Copy the CSS code instantly.
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.
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.
Empathy Map Creator â Online UX Design Thinking Tool
Fill in says, thinks, does, feels quadrants for a user persona. Save locally or print.
Legal Ipsum Text Generator - Online Fake Terms & Conditions
Create realisticâlooking legal and contract placeholder text. Perfect for designing termsâofâservice layouts.
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.
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.
Hebrew Dummy Text Generator - Online Placeholder for RTL
Get placeholder text in Hebrew for testing rightâtoâleft layouts. Generate paragraphs, sentences, or words.
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.
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.
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.
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.
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.
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.
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.
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.
Responsive Design Emulator - Online Test All Device Sizes
See your website inside iframes at multiple breakpoints simultaneously. Sideâbyâside responsive testing.
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.
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.
Taxonomy Term Generator - Online Card Sorting Helper
Brainstorm information architecture: enter a parent term and generate child terms and related concepts. Quick idea list.
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.
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.
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.
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.
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.
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.