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
Type your password and see how it stacks up against security policies in real time.
All checks run locally in your browser. Nothing is ever sent anywhere.
Enter container width, number of items, gap, and flexâbasis. See the resulting sizes instantly. Plan your flex layout.
Create a passkey and authenticate using the Web Authentication API. Supports platform authenticators (TouchID, FaceID). No server.
Create a custom cookie consent banner with text, button styles, and colors. Copy the readyâtoâuse HTML/CSS/JS snippet.
Write a self-contract with a goal and reward/penalty. Sign digitally, save as image. Stay accountable.
Use the browser's native eyedropper tool to pick any color from the screen. Shows zoomed preview. Quick and easy.
Design a custom focus indicator with outline, offset, and boxâshadow. Preview on interactive elements. Copy the CSS.
Adjust margin, border, padding, and content sizes interactively and see the rendered box model. Get the exact CSS. Teach or learn layout.
Find the ideal height to hang art based on wall and furniture dimensions. Follow gallery standard 57âinch center rule.
Upload an image and get a suggested alt text description using a local vision model (WASM). Improve SEO and accessibility fast.
See how scrollâpadding and scrollâmargin affect the position of elements when using anchor links or scrollâsnap. Visual.
Check current screen orientation and test the lock API. Useful for mobile web apps. Demo with code.
Use the EyeDropper API to sample a color from anywhere on your screen. Click, select, and copy the hex. No extensions needed.
Create CSS maskâimage effects with custom shapes, gradients, and SVGs. Visually see the mask applied to an image. Copy the CSS.
Change all alignment and justification values and see the flex items move. Indispensable for learning Flexbox.
Test your device's builtâin biometric (Touch ID, Face ID, Windows Hello) using the Web Authentication API. Register and verify.
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.
Open a modal and see how focus is trapped and restored. Copy the lightweight focusâtrap code. Accessible pattern.
Create a simple 4-shaft weaving draft by clicking warp/weft threads. See plain weave, twill, satin. Educational for weavers. Local only.
Build a .editorconfig file by setting indentation, charset, and endâofâline rules for your project. Keep all contributors aligned.
Touch the screen and see the exact coordinates, radius, and force of each touch point. Indispensable for mobile web devs.
Enter your hand and dealer's up card to see optimal move (hit, stand, double, split) using basic strategy. Educational casino reference.
Paste a screenshot or image, crop it, and add arrows, rectangles, and text. Essential for bug reports and tutorials.
Design layered box shadows interactively and get the CSS code in real time. Adjust offset, blur, spread, and color. Essential tool for UI designers.
Visually experiment with Flexbox container and item properties. See the layout update in real time and copy the CSS. Learn by doing, fully interactive.
Browse the builtâin styles that browsers apply to HTML elements. Understand why your page looks different. Static reference.
Design neumorphic elements by adjusting boxâshadow parameters. Realâtime preview and CSS output. For modern soft UI interfaces.
Learn how to let content extend a few pixels beyond a clip boundary with overflowâclipâmargin. Interactive playground.
Generate the Koch snowflake fractal to a desired iteration level. See how the perimeter grows. Interactive geometric art.
Create a 'SALE' or 'NEW' corner ribbon in pure CSS. Adjust colors, position, and text. Great for eâcommerce.
Set up a Shared Worker that shares state across multiple browser tabs. Counter and messaging demo. Advanced web.