CSS Grid Placement Playground - Online Visual Area Builder
Drag items into grid cells and see the resulting gridâarea or lineâbased placement code. Learn how autoâplacement and spanning work.
UD5 Toolkit
A Latin Square is an n Ă n grid filled with n distinct symbols, where each symbol appears exactly once in each row and each column.
This creates a perfectly balanced grid â every symbol occupies every row position and column position exactly once, making it ideal for experimental design and counterbalancing.
Drag items into grid cells and see the resulting gridâarea or lineâbased placement code. Learn how autoâplacement and spanning work.
Generate UUID v7 identifiers that are lexicographically sortable and timestamped. Perfect for databases. All local.
Generate a valid BookCrossing BCID with checksum for your free book tracking label. Follows BCID format rules. Fun for sharing books.
Experiment with CSS Grid properties visually. Add rows, columns, and areas. See the grid in action and copy the code.
Spin the globe and get a random country or city to visit. Learn a fun fact. Plan your next adventure. Local data.
Write a function name and get a complete unit test stub with describe, it, and expect. Follows AAA pattern.
Check if your site is crossâorigin isolated by examining the COOP and COEP headers. See if SharedArrayBuffer is available.
Encode text into Wingdings symbols and decode Wingdings back to text. A nostalgic and fun puzzle tool. All processing in your browser.
Generate short, URLâsafe, unique string IDs with customizable alphabet and length. Smaller than UUID. Local only.
Upload a photo, enter details, and create a tear-off style lost pet poster. Instant PDF download.
Encode letters to their position in the alphabet (A=1, B=2...) and decode back. A classic puzzle tool. No data leaves your device.
Convert climbing difficulty between Vâscale, Fontainebleau, and Yosemite Decimal System. Quick reference for gym climbers.
Issue and redeem Private State Tokens (formerly Trust Tokens). Understand how they help detect bots without cookies.
Write CSS with native nesting (like SCSS) and see the browserâs native parsing. Validator and live output.
Intercept and manage navigations without reloading. Test transition handling and URL updates. The future of clientâside routing.
Visually configure scrollâsnap containers and items. Adjust alignment, stop behavior, and padding. Copy the clean CSS instantly.
Generate the MD5 hash of any text string. For quick integrity checks. All local computation.
Format a list of Q&A pairs and export as a CSV ready for Anki import. Simple lineâbased template. Local.
Style underlines, overlines, and strike-throughs with colors, wavy styles, and thickness. Modern CSS textâdecoration.
Generate a random medieval occupation with a short description. For NPCs or historical curiosity. Local list.
Design a fully styled scrollbar with colors, width, radius, and hover effects. Supports both ::-webkitâscrollbar and Firefox scrollbarâwidth.
Create a realistic letterpress (debossed) text effect using CSS textâshadow and background. Adjust depth and light direction. Copy code.
Generate a realisticâsounding dinosaur name and see a fun description. Perfect for kids and writers.
Create a customizable checkerboard or grid background using pure CSS gradients. Adjust cell size and colors. Copy the code.
Upload a small pixel art image and get a CSS grid layout that recreates it using divs. Novelty developer tool.
Generate a random, funny or serious company slogan for your startup idea. Brainstorming helper. All local.
Generate a random, somewhat meaningful song lyric line. Write your own hit with AIâfree randomness. All local.
Pick an emoji and convert it into a proper favicon .ico file for your website. No design skills needed. Instant download.
Generate a realisticâsounding exoplanet designation (e.g., Keplerâ442b) and a sciâfi planet description. For worldbuilding.
Add a decorative rectangular border/frame to your image. Adjust width, color, and shadow. Download the framed photo.