CSS color‑mix() Visualizer - Online Blend in sRGB & OKLCH
Pick two colors and mix them in different color spaces with sliders. See the difference between sRGB and OKLCH mixing. Copy the code.
UD5 Toolkit
Press keys on your physical keyboard or click modifier keys below — see the shortcut in macOS & Windows notation.
| ⌘ Command | (or Cmd, ⌘) |
| ⌥ Option | (or Alt) |
| ⌃ Control | (or Ctrl) |
| ⇧ Shift | |
| ⇪ Caps Lock |
| ⊞ Win Windows | (or Super) |
| Alt Alternate | |
| Ctrl Control | |
| Shift | |
| Fn Function | (on laptops) |
keydown and keyup events. It tracks the state of modifier flags (ctrlKey, altKey, shiftKey, metaKey) in real time. No data is ever sent anywhere — all detection happens locally in your browser. The visual keyboard lights up to show exactly which keys are being pressed.
Pick two colors and mix them in different color spaces with sliders. See the difference between sRGB and OKLCH mixing. Copy the code.
Design a custom focus indicator with outline, offset, and box‑shadow. Preview on interactive elements. Copy the CSS.
Browse a collection of ready-to-use CSS animations (fade, slide, bounce). Click to preview, then copy @keyframes and class to your project. Local tool.
Add rows and columns, merge cells, and set gaps visually. Get the grid‑template CSS and HTML. Fast layout prototyping.
Design a custom focus indicator with outline, offset, and box‑shadow. Preview on interactive elements. Copy the CSS.
Pick a COLRv1 color font and change its palette with font‑palette. Create custom palettes with @font‑palette‑values.
Add multiple CSS filters (grayscale, blur, hue‑rotate) to an image. See the combined effect. Copy the CSS filter value.
Compile LESS code to plain CSS in your browser. Check for syntax errors and get clean output. For legacy projects.
Design beautiful buttons with gradients, shadows, and hover/active effects. No JavaScript required. Copy the CSS.
Browse a collection of common UI components (cards, modals, navbars) built with pure CSS. Preview and copy the HTML/CSS. Fast prototyping.
Design a modern button with gradients, shadows, and hover effects. Copy the clean CSS code.
Build and test regular expressions against sample text. Real-time match highlighting, capture groups display, and flavor options. All inside your browser.
Write CSS like `oklch(from red l c h)` to modify colors. Preview the output and copy. Modern color manipulation.
Drag points to create a custom clip‑path shape. See the CSS value update live. For creating non‑rectangular elements.
Convert hex, RGB, or HSL into the modern OKLCH color space. See the preview and copy CSS oklch() value. Local.
Search a library of famous company brand colors with hex codes. Copy any color instantly. For designers and marketers.
Paste code and get a beautifully highlighted preview with line numbers. Supports many languages. Copy as HTML. Pure frontend.
Paste your Accept‑Language header and see which languages your site should serve based on quality values. Internationalization helper.
Find out the real destination of any shortened link (bit.ly, t.co, etc.) without clicking. Resolves redirects locally using public HTTP headers.
Convert your text to all lowercase instantly. Clean and simple. Works offline.
Minify JavaScript and CSS code to reduce file size for production. Remove whitespace and comments instantly. Run locally, your code stays private.
Set perspective and rotate children in 3D space. See the effect of perspective‑origin. Copy the CSS. Learn 3D transforms.
Compile SCSS code to CSS directly in the browser using the official Sass.js library. Supports variables, mixins, nesting. No server upload required.
Pick two images or colors and apply all 16 CSS mix‑blend‑mode values live. See and copy the right CSS for your design.
Write CSS like `oklch(from red l c h)` to modify colors dynamically. Preview the output and copy the code.
Type text and instantly see it rendered with text‑transform: uppercase, lowercase, capitalize, and full‑width. Copy CSS.
Visually apply CSS transform functions like rotate, scale, skew, and translate. Obtain the exact CSS code for your elements. No coding needed.
Generate CSS-only triangles by configuring direction, size, and color. Copy the CSS snippet. Useful for creating speech bubbles and navigation arrows.
Style the notoriously hard file input. Generate a consistent button with preview. Copy the HTML/CSS.
Type a word like 'sunset' or 'calm' and generate a color palette inspired by that mood. Simple associative mapping.