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
Easily plan, allocate and visualize IPv4 subnets within a parent network. Avoid IP overlaps, optimize address space and get detailed network information instantly.
| Name | Network | Prefix | Usable Range | Broadcast | Hosts |
|---|
Enter container width, number of items, gap, and flex‑basis. See the resulting sizes instantly. Plan your flex layout.
Find the ideal height to hang art based on wall and furniture dimensions. Follow gallery standard 57‑inch center rule.
Number each line of your text sequentially. Customize start number and format. Useful for code snippets, tutorials, and document review. Private operation.
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.
Create a simple 4-shaft weaving draft by clicking warp/weft threads. See plain weave, twill, satin. Educational for weavers. Local only.
Translate between binary and Gray code (reflected binary code). See the bit changes. Useful for digital logic.
Define password rules and see a live checklist that updates as you type. Design better password UX for your app.
Record your screen, application window, or browser tab directly using the Screen Capture API. Download as WebM. All local.
Paste a screenshot or image, crop it, and add arrows, rectangles, and text. Essential for bug reports and tutorials.
Paste HTML/CSS snippets or enter properties to test how z‑index and stacking contexts interact. Real‑time example.
Touch the screen and see the exact coordinates, radius, and force of each touch point. Indispensable for mobile web devs.
Build a .editorconfig file by setting indentation, charset, and end‑of‑line rules for your project. Keep all contributors aligned.
Create a passkey and authenticate using the Web Authentication API. Supports platform authenticators (TouchID, FaceID). No server.
Paste code and generate a beautiful, syntax‑highlighted PNG image. Choose theme and window style. Shareable code pics.
Write a self-contract with a goal and reward/penalty. Sign digitally, save as image. Stay accountable.
Adjust margin, border, padding, and content sizes interactively and see the rendered box model. Get the exact CSS. Teach or learn layout.
Upload an image and get a suggested alt text description using a local vision model (WASM). Improve SEO and accessibility fast.
Enter your hand and dealer's up card to see optimal move (hit, stand, double, split) using basic strategy. Educational casino reference.
Create CSS mask‑image effects with custom shapes, gradients, and SVGs. Visually see the mask applied to an image. Copy the CSS.
Paste your CSS and see warnings for properties that have limited browser support. Links to CanIUse. Modernize safely.
Calculate how many bottles of puzzle glue you need based on puzzle dimensions. Save a trip to the store. Simple area math.
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.
Generate standard 1D barcodes including CODE128, EAN-13, and UPC-A. Download as image for product labeling or inventory. All processing happens locally.
Visually configure scroll‑snap containers and items. Adjust alignment, stop behavior, and padding. Copy the clean CSS instantly.
Open a modal and see how focus is trapped and restored. Copy the lightweight focus‑trap code. Accessible pattern.
Set the inset property and see its logical shorthand equivalents. Copy the modern CSS for absolutely positioned elements.
See how scroll‑padding and scroll‑margin affect the position of elements when using anchor links or scroll‑snap. Visual.
Create a custom cookie consent banner with text, button styles, and colors. Copy the ready‑to‑use HTML/CSS/JS snippet.
Design a custom focus indicator with outline, offset, and box‑shadow. Preview on interactive elements. Copy the CSS.
Design neumorphic elements by adjusting box‑shadow parameters. Real‑time preview and CSS output. For modern soft UI interfaces.