Flex‑Basis Calculator & Visualizer - Online CSS Flex
Enter container width, number of items, gap, and flex‑basis. See the resulting sizes instantly. Plan your flex layout.
UD5 Toolkit
Find the perfect eye-level height for your artwork using the 57-inch gallery standard. Get precise hook placement instantly—ideal for any wall or above furniture.
Enter container width, number of items, gap, and flex‑basis. See the resulting sizes instantly. Plan your flex layout.
Enter an IP and CIDR prefix to visually see network address, broadcast, usable range, and subnet mask conversions.
Upload an image and get a suggested alt text description using a local vision model (WASM). Improve SEO and accessibility fast.
Paste a screenshot or image, crop it, and add arrows, rectangles, and text. Essential for bug reports and tutorials.
Enter your hole cards and the community cards to see probability of winning, drawing, etc. Simple simulation in browser. Educational, not gambling.
Define password rules and see a live checklist that updates as you type. Design better password UX for your app.
Write a self-contract with a goal and reward/penalty. Sign digitally, save as image. Stay accountable.
Check current screen orientation and test the lock API. Useful for mobile web apps. Demo with code.
Adjust margin, border, padding, and content sizes interactively and see the rendered box model. Get the exact CSS. Teach or learn layout.
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.
See how scroll‑padding and scroll‑margin affect the position of elements when using anchor links or scroll‑snap. Visual.
Create a simple 4-shaft weaving draft by clicking warp/weft threads. See plain weave, twill, satin. Educational for weavers. Local only.
Paste your CSS and see warnings for properties that have limited browser support. Links to CanIUse. Modernize safely.
Number each line of your text sequentially. Customize start number and format. Useful for code snippets, tutorials, and document review. Private operation.
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.
Use the browser's native eyedropper tool to pick any color from the screen. Shows zoomed preview. Quick and easy.
Calculate how many bottles of puzzle glue you need based on puzzle dimensions. Save a trip to the store. Simple area math.
Create a 'SALE' or 'NEW' corner ribbon in pure CSS. Adjust colors, position, and text. Great for e‑commerce.
Design a custom focus indicator with outline, offset, and box‑shadow. Preview on interactive elements. Copy the CSS.
Design a pure CSS tooltip with custom text, position (top/bottom/left/right), and arrow. Copy the clean code.
Change all alignment and justification values and see the flex items move. Indispensable for learning Flexbox.
Visually configure scroll‑snap containers and items. Adjust alignment, stop behavior, and padding. Copy the clean CSS instantly.
Paste code and generate a beautiful, syntax‑highlighted PNG image. Choose theme and window style. Shareable code pics.
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.
Paste HTML/CSS snippets or enter properties to test how z‑index and stacking contexts interact. Real‑time example.
Record your screen, application window, or browser tab directly using the Screen Capture API. Download as WebM. All local.
Generate a grey placeholder image with custom text and dimensions. Data URI output. No external service.
Visually adjust each corner's radius on an image independently. Preview and download as PNG. For non‑uniform rounding.
Learn how to let content extend a few pixels beyond a clip boundary with overflow‑clip‑margin. Interactive playground.
Visually experiment with Flexbox container and item properties. See the layout update in real time and copy the CSS. Learn by doing, fully interactive.