EyeDropper API - Online Pick Any Screen Color
Use the EyeDropper API to sample a color from anywhere on your screen. Click, select, and copy the hex. No extensions needed.
UD5 Toolkit
Click the button, then click anywhere on your screen to pick a color. Built-in magnifier helps precise selection.
Drag & drop an image here
or click to browse · or paste (Ctrl+V) a screenshot
Upload an image to start picking colors with the magnifier
Use the EyeDropper API to sample a color from anywhere on your screen. Click, select, and copy the hex. No extensions needed.
Design a custom focus indicator with outline, offset, and box‑shadow. Preview on interactive elements. Copy the CSS.
Paste a screenshot or image, crop it, and add arrows, rectangles, and text. Essential for bug reports and tutorials.
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.
Upload an image and generate the CSS to use it as a custom mouse cursor. Test it live. Fun for personal websites.
Design a pure CSS tooltip with custom text, position (top/bottom/left/right), and arrow. Copy the clean code.
Enter container width, number of items, gap, and flex‑basis. See the resulting sizes instantly. Plan your flex layout.
Open a modal and see how focus is trapped and restored. Copy the lightweight focus‑trap code. Accessible pattern.
Define password rules and see a live checklist that updates as you type. Design better password UX for your app.
Touch the screen and see the exact coordinates, radius, and force of each touch point. Indispensable for mobile web devs.
Upload an image and get a suggested alt text description using a local vision model (WASM). Improve SEO and accessibility fast.
Create CSS mask‑image effects with custom shapes, gradients, and SVGs. Visually see the mask applied to an image. Copy the CSS.
Visually adjust each corner's radius on an image independently. Preview and download as PNG. For non‑uniform rounding.
Paste your CSS and see warnings for properties that have limited browser support. Links to CanIUse. Modernize safely.
Find the ideal height to hang art based on wall and furniture dimensions. Follow gallery standard 57‑inch center rule.
Design neumorphic elements by adjusting box‑shadow parameters. Real‑time preview and CSS output. For modern soft UI interfaces.
Design layered box shadows interactively and get the CSS code in real time. Adjust offset, blur, spread, and color. Essential tool for UI designers.
Design a tooltip that appears on hover without JavaScript. Choose positioning, arrow, and animation. Copy the clean HTML/CSS.
Paste code and generate a beautiful, syntax‑highlighted PNG image. Choose theme and window style. Shareable code pics.
Check current screen orientation and test the lock API. Useful for mobile web apps. Demo with code.
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.
Record your screen, application window, or browser tab directly using the Screen Capture API. Download as WebM. All local.
Translate between binary and Gray code (reflected binary code). See the bit changes. Useful for digital logic.
Generate custom placeholder images for mockups and layouts. Specify dimensions, colors, and text. Export as PNG or use the generated data URI. Entirely browser-based.
Adjust margin, border, padding, and content sizes interactively and see the rendered box model. Get the exact CSS. Teach or learn layout.
Test the new HTML popover attribute for creating accessible tooltips, menus, and dialogs without JavaScript. Copy code snippets.
Build a custom CSS reset by toggling which elements to normalize. Copy the resulting stylesheet. Lean and clean.
Browse the built‑in styles that browsers apply to HTML elements. Understand why your page looks different. Static reference.
Design a fully styled scrollbar with colors, width, radius, and hover effects. Supports both ::-webkit‑scrollbar and Firefox scrollbar‑width.
Visually configure scroll‑snap containers and items. Adjust alignment, stop behavior, and padding. Copy the clean CSS instantly.