UD5 Toolkit
CSS Filter Functions Playground - Online Visual Adjustments
Chain multiple CSS filter functions and see the result on an image. Copy the filter string. No upload.
Visual CSS Specificity Calculator - Online (0,0,1) Style
Visual CSS Specificity Calculator
Instantly calculate and compare CSS selector specificity. See exact (0,0,1,0) scores and understand which rule wins.
Selector Specificity
Quick fill:
Compare Selectors
Frequently Asked Questions
Specificity is the browser’s algorithm to decide which CSS rule applies when multiple rules target the same element. It is usually expressed as a four-part number (a,b,c,d): inline styles (a), IDs (b), classes/attributes/pseudo-classes (c), and element types/pseudo-elements (d). Higher numbers mean higher priority.
The value (0,1,2,3) means 0 inline, 1 ID, 2 classes/attributes/pseudo-classes, and 3 type/pseudo-element selectors. Compare from left to right: the first larger number wins. This tool shows both the breakdown and the total textual representation.
Yes, pseudo-elements (like ::before, ::after, :first-line) count as type selectors (position d). Pseudo‑classes (like :hover, :nth-child()) count as class‑level selectors (position c).
:not() and :is() contribute the specificity of their most specific argument. This tool gives them a single class‑level weight for simplicity — good enough for most everyday selectors. :where() adds zero specificity.!important overrides normal specificity. Inline styles have the highest specificity (a=1,0,0,0) unless !important is used. This calculator focuses on selector-based specificity only.A comma-separated group (e.g.,
.class, #id) contains independent selectors. Each has its own specificity — they aren’t combined. Enter one selector chain at a time to get a meaningful result.touch‑action CSS Playground - Online Gesture Control
Limit browser gestures on an element: pan‑x, pinch‑zoom, manipulation. Draw on a canvas to test. Mobile dev helper.
CSS‑in‑JS Runtime Cost Simulator - Online Render 1000 Nodes
Render 1000 styled elements using inline styles vs. CSS classes and compare time. Understand CSS‑in‑JS trade‑offs.
Gradient Match Game - Online Drag & Match Linear CSS
Recreate the target CSS linear gradient by adjusting stops and colors. A unique game for front‑end developers to master gradients.
Animated Gradient CSS Generator - Online Moving Background
Create a looping animated gradient background with multiple color stops. Copy the complete CSS keyframes. Eye‑catching.
JavaScript Regex Cheatsheet - Online Interactive Pattern Reference
Interactive cheatsheet for JavaScript regular expressions with live examples. Click any token to see its explanation and test it on sample text immediately.
Video Color Filter - Online Apply Tint to Video in Browser
Apply real-time CSS filters or canvas effects to a video and download the processed output. Experiment with video post-processing locally.
Interactive Regex Cheatsheet - Online Quick Reference
An interactive reference for regular expression tokens. Click a token to see its explanation and example. Learn regex faster.
CSS Transform Origin Playground - Online Visual Pivot
Click on a box to set the transform‑origin point and see how rotations and scales change. Copy the CSS.
Wood Joint Selector – Online Choose Based on Load & Look
Answer questions about project type and strength needed to get a joint recommendation. Animations.
Color Splash Effect - Online Isolate a Single Color
Keep one selected color and turn the rest of the image to grayscale. Eye‑catching selective color effect. Pure canvas.
Remove White Background - Online Make Transparent
Automatically remove white background from an image and make it transparent. Adjust tolerance. Save as PNG.
object‑fit & object‑position Demo - Online Image Scale Control
Try all object‑fit values (fill, contain, cover, scale‑down) on an image. Adjust object‑position. Copy the CSS.
Remove Specific Color - Online Extract or Delete Hue
Select a color in an image and completely remove it or make it transparent. Great for background removal experiments. Local.
AI Background Remover (Local) - Online Remove Background Free
Automatically remove the background from any photo using a small on‑device AI model (WASM). No upload. Works offline.
Touch Feedback Generator - Online Haptic & Visual Cue
Preview different touch feedback patterns (scale, color, ripple) for mobile buttons. Copy the CSS and HTML. Improve mobile UX.
Markdown Table Generator - Online Visual Builder & Formatter
Create and format Markdown tables by adjusting rows and columns. Align text, copy the raw Markdown. Perfect for README files.
Image Hue Shifter - Online Change Colors Easily
Rotate the hue of any image globally. Turn a red car blue instantly. Download the result. Works entirely in the browser.
animation‑composition Demo - Online Blend Multiple Animations
See how `animation‑composition: replace, add, accumulate` works by layering animations on the same property. Understand the spec.
Noise Texture & Grain Generator - Online CSS Background
Generate a subtle noise/grain texture as a CSS background pattern. Adjust opacity and size. For that film look.
.nvmrc Node Version Generator - Online
Select a Node.js version from the LTS list and instantly download a .nvmrc file. Lock your project’s runtime.
Google Apps Script Web App Boilerplate - Online Starter Code
Generate the doGet() and doPost() boilerplate for a Google Apps Script web app. Ready to paste into the editor.
Selection & Range API Demo - Online Get/Set Selection
Select text and see the Selection object properties. Create ranges programmatically. Understand how rich‑text editors work.
Live Image Trace - Online Adjust Threshold to Vector
Adjust a brightness threshold slider and see the live vector trace of an image. Export as SVG. Potrace‑style.
Code Screenshot Generator - Online Carbon Code Image Maker
Create beautiful, syntax-highlighted screenshots of your code snippets. Choose themes and export as PNG. All client-side canvas rendering.
Noise Texture CSS Generator - Online Grain & Grunge
Generate a subtle or heavy noise/grain texture as a CSS background. Adjust intensity and color. Copy the small code.
Image Background Blur Tool - Online Portrait Depth Effect
Apply a blur effect to image background while keeping the subject sharp. Simple brush selection for area to keep sharp. CSS+Canvas implementation, local only.
Dynamic SVG Placeholder Generator - Online Text-Based
Generate an SVG placeholder image with custom text, width, height, and colors. Use as a placeholder service. Pure SVG.
SVG Placeholder Image - Online Dynamic Size Box
Generate a link to an SVG placeholder image with a custom width, height, and text. Use as dummy image src. No server.
HTML Symbol Entities Cheatsheet - Online Search & Copy
Search and copy HTML entities for arrows, math, currency, and symbols. See the glyph and code. Fast reference.