Simple Weaving Draft Generator - Online 4-Shaft Pattern Creator
Create a simple 4-shaft weaving draft by clicking warp/weft threads. See plain weave, twill, satin. Educational for weavers. Local only.
UD5 Toolkit
Create a simple 4-shaft weaving draft by clicking warp/weft threads. See plain weave, twill, satin. Educational for weavers. Local only.
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.
Visually experiment with Flexbox container and item properties. See the layout update in real time and copy the CSS. Learn by doing, fully interactive.
Visually configure scroll‑snap containers and items. Adjust alignment, stop behavior, and padding. Copy the clean CSS instantly.
Create a 'SALE' or 'NEW' corner ribbon in pure CSS. Adjust colors, position, and text. Great for e‑commerce.
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.
Design a fully styled scrollbar with colors, width, and border radius. Get the CSS for Chrome and Firefox.
Upload an image and get a suggested alt text description using a local vision model (WASM). Improve SEO and accessibility fast.
Design layered box shadows interactively and get the CSS code in real time. Adjust offset, blur, spread, and color. Essential tool for UI designers.
Design a pure CSS tooltip with custom text, position (top/bottom/left/right), and arrow. Copy the clean code.
Design a fully styled scrollbar with colors, width, radius, and hover effects. Supports both ::-webkit‑scrollbar and Firefox scrollbar‑width.
Enter container width, number of items, gap, and flex‑basis. See the resulting sizes instantly. Plan your flex layout.
Define password rules and see a live checklist that updates as you type. Design better password UX for your app.
Create CSS mask‑image effects with custom shapes, gradients, and SVGs. Visually see the mask applied to an image. Copy the CSS.
Visually adjust each corner's radius on an image independently. Preview and download as PNG. For non‑uniform rounding.
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 a screenshot or image, crop it, and add arrows, rectangles, and text. Essential for bug reports and tutorials.
Design a tooltip that appears on hover without JavaScript. Choose positioning, arrow, and animation. Copy the clean HTML/CSS.
Design neumorphic elements by adjusting box‑shadow parameters. Real‑time preview and CSS output. For modern soft UI interfaces.
Generate a React custom hook boilerplate with state, effect, and cleanup. Pick the pattern and copy.
Find the ideal height to hang art based on wall and furniture dimensions. Follow gallery standard 57‑inch center rule.
Adjust margin, border, padding, and content sizes interactively and see the rendered box model. Get the exact CSS. Teach or learn layout.
Create inner shadows for a pressed or sunken effect. Visually adjust and copy the CSS. Learn inset.
Generate standard 1D barcodes including CODE128, EAN-13, and UPC-A. Download as image for product labeling or inventory. All processing happens locally.
Change all alignment and justification values and see the flex items move. Indispensable for learning Flexbox.
Paste code and generate a beautiful, syntax‑highlighted PNG image. Choose theme and window style. Shareable code pics.
Upload an image and generate the CSS to use it as a custom mouse cursor. Test it live. Fun for personal websites.
Use the browser's native eyedropper tool to pick any color from the screen. Shows zoomed preview. Quick and easy.
Number each line of your text sequentially. Customize start number and format. Useful for code snippets, tutorials, and document review. Private operation.
Learn how to let content extend a few pixels beyond a clip boundary with overflow‑clip‑margin. Interactive playground.