UD5 Toolkit
CSS Drop Cap Generator - Online Fancy First Letter
Style the first letter of a paragraph as a large decorative drop cap. Choose font, color, and size. Get the CSS & HTML.
text‑wrap: balance Playground - Online Beautiful Typography
text-wrap: balance Playground
Explore how text-wrap: balance creates beautifully balanced typography. Compare with normal and pretty in real-time.
Recommended
text-wrap: balance
Each line is roughly equal in length
text-wrap: normal
Default greedy line-breaking algorithm
text-wrap: pretty
Prevents orphans (single-word last lines)
Frequently Asked Questions
CSS Transition Playground - Online Visual Easing Curve Builder
Choose a property, duration, and bezier curve. Trigger the transition and see the animation. Copy the complete CSS rule.
CSS Background Pattern Generator - Online Stripes, Dots & Checks
Create seamless CSS background patterns like stripes, polka dots, checkerboard. Adjust size and colors. Copy the tiny CSS.
CSS inset Property Demo - Online Shorthand for Top/Right/Bottom/Left
Set the inset property and see its logical shorthand equivalents. Copy the modern CSS for absolutely positioned elements.
CSS Custom Property Polyfill Checker - Online IE11 Fallback
Paste your CSS and see a static fallback version where var() is replaced with the default value. For legacy support.
Animated Border CSS Generator - Online Glow & Rotate
Create a glowing or rotating border animation around an element. Copy the CSS keyframes. Pure CSS magic.
Hover State Simulator - Online Test :hover :active :focus
Type any CSS selector with :hover/:active/:focus and see the styles applied live. Perfect for debugging interaction states.
CSS Glow Hover Effect - Online Animated Box Shadow
Design a button or card that glows on hover. Adjust shadow color, spread, and transition. Copy the CSS. Rich UI.
CSS abs() and sign() Functions Demo - Online Math
Use the abs() and sign() CSS functions to create interesting layouts. See computed values live. Cutting‑edge CSS.
Daily Horoscope Generator - Online Fun Zodiac Reading
Get a random, lighthearted daily horoscope based on your zodiac sign. For entertainment only. No personal data collected.
Browser Fingerprint Viewer - Online See Your Unique ID
Generate a hash showing how trackers can fingerprint your browser (canvas, WebGL, fonts). Educational and privacy‑aware.
Ternary Operator Playground - Online Explore ? : in JavaScript
Type any condition and see the result of the ternary operator. Understand truthy/falsy values. Quick learning tool.
Digital Vaccine Card Wallet – Online Store & Display QR
Securely store your vaccination records as a digital card with a QR code to a verification URL (local only). No server.
Public Holidays Calendar - Online All Countries
Select a country and year to see every public holiday. Static data for major countries. Plan your vacations.
Dog Breed Identifier - Online Reference with Pictures
Browse a searchable list of dog breeds with pictures and traits. Find the breed you saw. Static data, fast.
2D Vector Field Plotter - Online Math and Physics
Enter a mathematical function for dx and dy and see the vector field arrows. Perfect for studying differential equations.
Fake ID Number Generator - Online Test SSN/SIN Lookalike
Generate random, formatted ID numbers that match pattern rules for various countries. For testing input validation. No real data.
Egg Hatching Calendar - Online Incubation Countdown for Poultry
Set start date and egg type (chicken, duck, quail) to generate a hatching timeline with milestone alerts (lockdown, pip, hatch). Local only.
SPF Record Generator - Online Email Authentication DNS
Build a valid SPF TXT record by selecting mail servers, IPv4/IPv6 ranges, and includes. Validate syntax and get ready‑to‑publish output.
CSS Scroll Snap Generator - Online Visual Builder
Visually configure scroll‑snap containers and items. Adjust alignment, stop behavior, and padding. Copy the clean CSS instantly.
Advanced CSS Gradient Builder - Online Multi‑Stop & Angle
Create complex linear gradients with any number of color stops, exact angles, and length units. Live preview and CSS code.
CSS Variable Theme Switcher - Online Dark/Light Generator
Design a light and dark theme by picking colors for backgrounds, text, and links. Get the CSS for both themes. Local.
Text Decoration CSS Generator - Online Underline & Strike
Style underlines, overlines, and strike-throughs with colors, wavy styles, and thickness. Modern CSS text‑decoration.
CSS Opacity & RGBA Generator - Online Transparency Tool
Adjust opacity visually with a slider and see the different CSS representations (opacity property vs RGBA/HSLA). Copy best option.
Mix‑Blend‑Mode Playground - Online CSS Effect Tester
Pick two images or colors and apply all 16 CSS mix‑blend‑mode values live. See and copy the right CSS for your design.
Custom Scrollbar CSS Generator - Online Firefox & Webkit
Design a fully styled scrollbar with colors, width, radius, and hover effects. Supports both ::-webkit‑scrollbar and Firefox scrollbar‑width.
Font Fallback Checker - Online See Missing Glyphs
Type any character and see how it renders in different font stacks. Detect missing glyphs and fallback behavior.
CSS Letterpress Text Effect - Online Inset Typography
Create a realistic letterpress (debossed) text effect using CSS text‑shadow and background. Adjust depth and light direction. Copy code.
CSS Property Sorter - Online Order Alphabetically or Box Model
Paste your CSS and sort the properties of each rule alphabetically or by concentric groups. Keep your stylesheets consistent without a build step.
CSS Checkerboard Pattern - Online Background Generator
Create a customizable checkerboard or grid background using pure CSS gradients. Adjust cell size and colors. Copy the code.