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
function helloWorld() {
console.log("Hello, beautiful world!");
}
radial-gradient(circle, #ff9a9e, #fecfef) or a solid color like #1e1e2e.Paste a screenshot or image, crop it, and add arrows, rectangles, and text. Essential for bug reports and tutorials.
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.
Create CSS mask‑image effects with custom shapes, gradients, and SVGs. Visually see the mask applied to an image. Copy the CSS.
Generate a grey placeholder image with custom text and dimensions. Data URI output. No external service.
Upload an image and get a suggested alt text description using a local vision model (WASM). Improve SEO and accessibility fast.
Generate standard 1D barcodes including CODE128, EAN-13, and UPC-A. Download as image for product labeling or inventory. All processing happens locally.
Press Ctrl+V to paste an image from your clipboard into the page. See dimensions and download. Simple utility.
Build a custom CSS reset by toggling which elements to normalize. Copy the resulting stylesheet. Lean and clean.
Generate a random HTML/CSS card with different box model properties. Inspect and guess the size. For learners.
Encode special characters to HTML entities or decode them back to normal text. Perfect for web developers to sanitize or reverse HTML escaping. All processing is client-side.
Design layered box shadows interactively and get the CSS code in real time. Adjust offset, blur, spread, and color. Essential tool for UI designers.
Learn how to let content extend a few pixels beyond a clip boundary with overflow‑clip‑margin. Interactive playground.
Paste a cURL command and instantly generate equivalent HTTP request code in Python, JavaScript, PHP, and more. Speed up API integration — fully local.
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.
Build a .editorconfig file by setting indentation, charset, and end‑of‑line rules for your project. Keep all contributors aligned.
Add customizable padding to any image. Make it square or fit a specific aspect ratio by adding whitespace. Download padded PNG.
Translate between binary and Gray code (reflected binary code). See the bit changes. Useful for digital logic.
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.
Type raw HTML and see the escaped version, then see how it renders when unescaped. Understand encoding better.
Upload an image and generate the CSS to use it as a custom mouse cursor. Test it live. Fun for personal websites.
Create a 'SALE' or 'NEW' corner ribbon in pure CSS. Adjust colors, position, and text. Great for e‑commerce.
Visually configure scroll‑snap containers and items. Adjust alignment, stop behavior, and padding. Copy the clean CSS instantly.
Create a custom cookie consent banner with text, button styles, and colors. Copy the ready‑to‑use HTML/CSS/JS snippet.
Record your screen, application window, or browser tab directly using the Screen Capture API. Download as WebM. All local.
Design a tooltip that appears on hover without JavaScript. Choose positioning, arrow, and animation. Copy the clean HTML/CSS.
Design a pure CSS tooltip with custom text, position (top/bottom/left/right), and arrow. Copy the clean code.
Understand @layer by visually ordering style layers and seeing which rules win. Fix specificity battles. Modern CSS architecture.
Adjust margin, border, padding, and content sizes interactively and see the rendered box model. Get the exact CSS. Teach or learn layout.
Number each line of your text sequentially. Customize start number and format. Useful for code snippets, tutorials, and document review. Private operation.
Test the new HTML popover attribute for creating accessible tooltips, menus, and dialogs without JavaScript. Copy code snippets.