Screenshot Cropper & Annotator - Online Markup Tool
Paste a screenshot or image, crop it, and add arrows, rectangles, and text. Essential for bug reports and tutorials.
UD5 Toolkit
Paste images instantly with Ctrl + V or drag & drop — preview right in your browser. 100% Private
Press Ctrl + V to Paste
or drag & drop an image here, or click to browse
Your image will appear here
URL.createObjectURL() and the Clipboard API.
No data is ever sent to any remote server. Your images remain completely private and secure on your device.
You can even disconnect your internet connection and the tool will continue to work perfectly.
navigator.clipboard.write() API to place the image directly onto your system clipboard.
After copying, you can paste it into any application — document editors, chat apps, email clients, or design tools.
Note that this feature requires a secure context (HTTPS) and is best supported in Chromium-based browsers
(Chrome, Edge, Brave, Opera). Firefox and Safari may have partial or no support for writing images to the clipboard.
Paste a screenshot or image, crop it, and add arrows, rectangles, and text. Essential for bug reports and tutorials.
Learn how to let content extend a few pixels beyond a clip boundary with overflow‑clip‑margin. Interactive playground.
Add customizable padding to any image. Make it square or fit a specific aspect ratio by adding whitespace. Download padded PNG.
Paste code and generate a beautiful, syntax‑highlighted PNG image. Choose theme and window style. Shareable code pics.
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.
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.
Visually configure scroll‑snap containers and items. Adjust alignment, stop behavior, and padding. Copy the clean CSS instantly.
Upload an image and generate the CSS to use it as a custom mouse cursor. Test it live. Fun for personal websites.
Visually adjust each corner's radius on an image independently. Preview and download as PNG. For non‑uniform rounding.
Type raw HTML and see the escaped version, then see how it renders when unescaped. Understand encoding better.
Generate standard 1D barcodes including CODE128, EAN-13, and UPC-A. Download as image for product labeling or inventory. All processing happens locally.
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.
Translate between binary and Gray code (reflected binary code). See the bit changes. Useful for digital logic.
Open a modal and see how focus is trapped and restored. Copy the lightweight focus‑trap code. Accessible pattern.
Generate a grey placeholder image with custom text and dimensions. Data URI output. No external service.
Number each line of your text sequentially. Customize start number and format. Useful for code snippets, tutorials, and document review. Private operation.
Adjust margin, border, padding, and content sizes interactively and see the rendered box model. Get the exact CSS. Teach or learn layout.
Fill in your details and instantly get a clean, printable one-page resume. No sign up, no data leaves your browser.
Use the browser's native eyedropper tool to pick any color from the screen. Shows zoomed preview. Quick and easy.
See how scroll‑padding and scroll‑margin affect the position of elements when using anchor links or scroll‑snap. Visual.
Design layered box shadows interactively and get the CSS code in real time. Adjust offset, blur, spread, and color. Essential tool for UI designers.
Fill in a form to generate a clean, ATS‑friendly one‑page resume. Customize sections, colors, and export as print‑ready PDF. Personal data stays in your browser.
Enter an IP and CIDR prefix to visually see network address, broadcast, usable range, and subnet mask conversions.
Visually experiment with Flexbox container and item properties. See the layout update in real time and copy the CSS. Learn by doing, fully interactive.
Record your screen, application window, or browser tab directly using the Screen Capture API. Download as WebM. All local.
Design a pure CSS tooltip with custom text, position (top/bottom/left/right), and arrow. Copy the clean code.
Design a tooltip that appears on hover without JavaScript. Choose positioning, arrow, and animation. Copy the clean HTML/CSS.
Change all alignment and justification values and see the flex items move. Indispensable for learning Flexbox.
Find the ideal height to hang art based on wall and furniture dimensions. Follow gallery standard 57‑inch center rule.