UD5 Toolkit
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.
light‑dark() Function Tester - Online Color Switch
light-dark() Function Tester
Test and preview the CSS light-dark() color function.
Define colors for light & dark modes, preview them side-by-side, and copy ready-to-use CSS code.
Chrome 123+
Firefox 120+
Safari 17.5+
Edge 123+
IE ❌
Light
Dark
Apply as:
Light Mode
Preview
Sample Card
This text adapts to your chosen color.
Action Button
Bordered element
Dark Mode
Preview
Sample Card
This text adapts to your chosen color.
Action Button
Bordered element
Preset Color Schemes
Generated CSS
background-color: light-dark(#ffffff, #1a1a1a);
Tip: Use light-dark() inside elements that have color-scheme: light dark set on them (or an ancestor).
Frequently Asked Questions
CSS Color Function Explorer - Online Write Modern Colors
Write modern CSS color functions like oklch(), lab(), hwb() and see the rendered color with fallback. Copy compatible code.
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.
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.
Colorblind Friendly Palette Checker - Online Simulate & Advise
Enter a color palette and see how it looks for different types of color vision deficiency. Get warnings on conflicting colors.
CSS HWB Color Generator - Online Whiteness/Blackness Picker
Interactively create colors in HWB space and get the CSS hwb() function. Simplifies tint/shade workflows. Live preview.
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.
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.
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.
Colorblind-Safe Palette Builder - Online Check & Generate Schemes
Build a palette and simulate how it appears to various color deficiencies. Also generate pre-vetted accessible palettes. Local processing.
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.
Accessible Color Contrast Matrix – Online Paste Palette & Check
Paste hex colors, generate a contrast matrix against each other. Identify failing pairs for WCAG.
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.
HWB Color Picker - Online Whiteness & Blackness Model
Pick colors using the HWB (Hue‑Whiteness‑Blackness) model. Get the CSS hwb() function code. Simpler than HSL for some.
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 Scale Generator - Online Create Monochromatic Stops
Generate a range of tints and shades from a single hex color. Ideal for data visualization, UI design systems, and Tailwind custom palette creation. Local tool.
CSS Subgrid Layout Builder - Online Align Nested Grids
Design a layout where nested grids share track sizes with their parent via subgrid. Copy the complete CSS.
Scroll Progress Bar Generator - Online CSS‑Only
Create a pure CSS scroll progress indicator using animation‑timeline: scroll(). No JavaScript. Copy the complete code.
CSS Compatibility Linter - Online Check Browser Support
Paste your CSS and see warnings for properties that have limited browser support. Links to CanIUse. Modernize safely.
SVG URI Encoder - Online Optimized for CSS Background
Paste an SVG and get an optimized, URL‑encoded data URI for use in CSS backgrounds. Reduces file size and escapes characters.
touch‑action CSS Playground - Online Gesture Control
Limit browser gestures on an element: pan‑x, pinch‑zoom, manipulation. Draw on a canvas to test. Mobile dev helper.
Advanced CSS Gradient Builder - Online Multi‑Stop & Angle
Create complex linear gradients with any number of color stops, exact angles, and length units. Live preview and CSS code.
Text Decoration CSS Generator - Online Underline & Strike
Style underlines, overlines, and strike-throughs with colors, wavy styles, and thickness. Modern CSS text‑decoration.
Random Box Model Snippet - Online CSS Layout Practice
Generate a random HTML/CSS card with different box model properties. Inspect and guess the size. For learners.
CSS Glow Hover Effect - Online Animated Box Shadow
Design a button or card that glows on hover. Adjust shadow color, spread, and transition. Copy the CSS. Rich UI.
Box Shadow Playground - Online Visual CSS Shadow Editor
Interactively add and adjust multiple box shadows on a sample element. Drag sliders for offset, blur, spread, and color. Copy the clean CSS code instantly.
CSS Letterpress Text Effect - Online Inset Typography
Create a realistic letterpress (debossed) text effect using CSS text‑shadow and background. Adjust depth and light direction. Copy code.
Noise Texture & Grain Generator - Online CSS Background
Generate a subtle noise/grain texture as a CSS background pattern. Adjust opacity and size. For that film look.
CSS Checkerboard Pattern - Online Background Generator
Create a customizable checkerboard or grid background using pure CSS gradients. Adjust cell size and colors. Copy the code.
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.