UD5 Toolkit
Grid vs Flexbox Layout Tester - Online Choose the Right Tool
Build the same layout with both Grid and Flexbox side by side. See the code differences and visual results.
CSS Grid Implicit Tracks Tester - Online Auto‑Rows & Columns
CSS Grid Implicit Tracks Tester
Visualize grid-auto-rows & grid-auto-columns — understand how implicit tracks are created and sized
Quick Presets
Explicit Grid
Implicit Track Size
Flow & Gap
8px
Grid Items
Explicit: 3×2
Explicit tracks
Implicit tracks
Item in explicit
Item triggering implicit
Generated CSS
Accessible Color Contrast Grid - Online Test Combinations
Enter a palette of colors and see a grid showing whether each foreground/background pair passes AA or AAA contrast. Must for designers.
CSS Container Query Tester - Online @container Playground
Experiment with CSS container queries. Resize a container and see the styles change according to its size, not the viewport. Learn the new spec.
CSS Container Queries Playground - Online Test @container
Experiment with CSS container queries in a live editor. Resize the container and see styles change based on its width/height. Learn modern responsive.
accent‑color Tester - Online Form Control Styling
Set a custom accent color for checkboxes, radios, range, and progress. See the browser’s rendering. Copy the CSS.
CSS color‑mix() Function Playground - Online Tester
Dynamically blend two colors using the CSS color‑mix() function in different color spaces. Copy the exact CSS snippet. No JS required.
Custom Range Slider CSS Generator - Online Styled Input
Style an `<input type='range'>` with custom track and thumb. Cross‑browser CSS. Preview and copy the code.
Color Swatch to CSS - Online Palette to Variables
Paste a list of hex colors and generate CSS custom properties for them. Create your design token file instantly.
Named CSS Colors Explorer - Online Preview All 148
Grid of all 148 named CSS colors. Hover to see detail, click to copy the name or hex. Essential frontend reference.
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.
Weather Stripping Selector – Online Gap Size to Material Guide
Match gap size around doors/windows to the correct type of weather stripping (foam, V-strip, door sweep). Save energy.
contrast‑color() Preview - Online Automatic Text Color
Test the upcoming contrast‑color() CSS function. Get white or black automatically for a given background. See it live.
Color Readability Tester - Online Visual Contrast Meter
Paste body text and test different font/background combos. See an actual passage rendered, not just a ratio. True feel for legibility.
HTML Color Names - Online Complete List with Hex & Preview
A complete, searchable list of all 140+ named HTML/CSS colors with their hex codes and color previews. Click to copy code. Essential web reference.
CSS Color Extractor - Online Find All Hex in Stylesheet
Paste a stylesheet and extract every unique color (hex, rgb, hsl) into a palette. Swatches displayed. Copy as JSON.
color() Display‑P3 Generator - Online Wide Gamut CSS
Pick a color in the Display‑P3 space and get the CSS color() function. See the difference from sRGB. For modern design.
Native Accordion Generator - Online HTML & Summary
Create a pure HTML/CSS accordion using <details> elements. Add custom styling and get the clean code. No JavaScript required.
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.
Running Splits Calculator - Online Race Pace Predictor
Enter a recent race time and predict times for other distances. Also get lap splits for different intervals.
HTML Color Input Explorer - Online Native Picker & Events
Use <input type='color'> and see its change events and value in hex. Understand the native color picker. Quick demo.
Website Color Theme Extractor - Online Grab Palette from CSS
Fetch a website's CSS and extract :root custom properties (‑‑color) to reveal its design token palette. For learning and inspiration.
Color Name to Hex - Online Official CSS Colors
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
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.
CSS Variable Theme Switcher - Online Dark/Light Generator
Design a light and dark theme by picking colors for backgrounds, text, and links. Get the CSS for both themes. Local.
Flexbox Froggy Simulator - Online Learn CSS Flexbox Game
A replica of the famous Flexbox Froggy game: solve alignment puzzles by writing CSS. Progress saved locally. Fun frontend learning.
Stepped Color Shade Generator - Online Tailwind‑Style Palette
Pick a base color and generate a full palette of 10 shades (50 to 900) like Tailwind CSS. Copy as hex or hsl.
light‑dark() Function Tester - Online Color Switch
Use the light‑dark() CSS function to change colors based on color scheme. Build a simple dark mode toggle with one property.
HDR Color Preview - Online See Wide Gamut Colors
Test if your display supports HDR colors by rendering a gradient in Rec.2020 space. See what you're missing. Canvas based.
React Testing Library Skeleton - Online Test Boilerplate
Enter a component name and generate a complete RTL test file with render, screen, and common assertions. Fast testing setup.
RGB to HEX Converter - Online Color Translator
Convert RGB and RGBA color values to their HEX or HEX+alpha representation. Live preview and copy CSS color strings instantly.