UD5 Toolkit
text‑emphasis CSS Playground - Online Decorative Marks
Apply text‑emphasis marks (filled dot, open circle, etc.) with color. Ideal for East Asian typography. Copy the style.
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.
Two‑Value Display Syntax Playground - Online Outer & Inner
Explore the new two‑value display syntax like `display: block flex`. See what each inner/outer pair does visually.
CSS Dynamic Island Demo - Online Pill Shape Animation
Create the iPhone Dynamic Island look‑alike with a pill that expands on hover. Pure CSS. Copy the playful code.
Text to Mountain Emoji Art - Online Landscape Maker
Turn your message into a scenic mountain emoji art panel. Choose different landscapes. Copy and paste anywhere.
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.
Image Emboss Effect - Online Raised 3D Look
Apply an emboss filter to your photo. Choose direction and depth. Gives a 3D carved stone look. Pure canvas.
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.
Emoji Mood Meter - Online Daily Feeling Check‑In
Select an emoji that matches your mood and log it to a simple calendar. Self‑awareness tool. Local only.
Injection Site Rotation Calendar – Online Abdomen, Thigh, Arm
Plan insulin or other injection sites with a visual body map and date log. Prevent lipohypertrophy.
Animated Border CSS Generator - Online Glow & Rotate
Create a glowing or rotating border animation around an element. Copy the CSS keyframes. Pure CSS magic.
Emoji Countdown Timer – Online Animated Pizza/Smiley Alarm
Set a short timer with a themed emoji animation (e.g., pizza cooking). A playful visual countdown.
Product Image Zoom Lens - Online Magnifier Effect
Create a zoom lens effect for product images. Move the cursor to magnify. Copy the HTML/CSS/JS code.
Bill Tracker – Online Visual Calendar for Due Dates
Add recurring bills with amounts and see a monthly calendar with due date indicators. Simple finance organizer.
Daily Mood Tracker - Online Emoji Journal & Chart
Track daily mood with emoji selection and optional notes. See weekly/monthly mood trends in a color-coded chart. All data stored privately in localStorage.
Emoji Counter - Online Tally Your Messages
Paste text and see a sorted count of all emojis used. Find your most‑used emoji. Fun analytics. All local.
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.
Simple Online Journal - Private Daily Notes & Diary
Write and store encrypted daily journal entries directly in your browser's localStorage. Export as TXT. No sign-up, fully private.
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.
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.
Pong Game - Online Classic Two‑Player Arcade
The original arcade Pong recreated in HTML5. Play against AI or local two‑player. Score up to 11 and win. Pure retro fun.
Supplement Half‑Life Reference – Online Vitamin D, B12 Chart
Reference for how long common supplements stay in the body. Inform taking frequency.
Gratitude Journal with Daily Prompts - Online Private Diary
Write a private gratitude entry guided by daily reflective prompts. All entries stored only in your browser with optional export as text file. No account needed.
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.
Random Horoscope Generator - Online Funny Daily Forecast
Get a humorous, randomly generated daily horoscope for any zodiac sign. Not real astrology; purely for laughs.
Letter to Future Self – Online Private Encrypted Journal
Write an encrypted letter to your future self, protected by a password. No server. Pure local Crypto.
Image Morphing Simulator - Online Face Blend
Upload two portraits and create a simple morph animation between them. Download as GIF. Local canvas magic.
Gantt Chart Dummy Generator - Online Project Timeline Visual
Enter task names, start dates, and durations to generate a simple Gantt chart as an image. Quick project view.
Rune Translator - Online English to Elder Futhark
Transliterate English letters into Elder Futhark runes. Fun for tattoos and fantasy. One‑to‑one mapping.
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.