UD5 Toolkit
font‑palette CSS Playground - Online Color Fonts Explorer
Pick a COLRv1 color font and change its palette with font‑palette. Create custom palettes with @font‑palette‑values.
CanIUse Quick Search - Online Browser Support Lookup
CanIUse Quick Search
Instantly check browser support for HTML5, CSS3, SVG, JS API features
loading browser support data…
FAQ
CanIUse provides up‑to‑date browser support tables for front‑end web technologies. This quick search tool lets you type any CSS property, HTML element, SVG feature or JavaScript API and instantly see its support across major browsers (Chrome, Firefox, Safari, Edge, etc.). The data is sourced from the open‑source caniuse project.
- Green – Fully supported
- Red – Not supported
- Yellow – Partial support
- Dark – Prefixed or behind a flag
- Grey – Support unknown
- Blue – Polyfill available
We fetch the latest support data directly from the official caniuse dataset. The information reflects the most recent stable and beta browser releases. You can always cross‑check with the full caniuse.com website for detailed notes and known issues.
Yes, once the data has been cached by your browser you can perform searches without an internet connection. The entire feature database is loaded on your first visit and stays available for subsequent lookups.
Partial support means the feature works but with limitations (e.g., missing sub‑properties, alternative syntax, or buggy implementation). Always check the detailed notes on caniuse.com by clicking the feature name in the result card. The dot tooltips also mention “Partial support” for those versions.
Focus Outline Styler - Online Design Accessible Rings
Design a custom focus indicator with outline, offset, and box‑shadow. Preview on interactive elements. Copy the CSS.
Online Code Minifier - JS & CSS Compression Tool
Minify JavaScript and CSS code to reduce file size for production. Remove whitespace and comments instantly. Run locally, your code stays private.
Custom Focus Ring Styler - Online CSS :focus‑visible Designer
Design a custom focus indicator with outline, offset, and box‑shadow. Preview on interactive elements. Copy the CSS.
CSS Filter Visual Editor - Online Apply & Chain Filters
Add multiple CSS filters (grayscale, blur, hue‑rotate) to an image. See the combined effect. Copy the CSS filter value.
CSS Relative Color Syntax Playground - Online from a Base Color
Write CSS like `oklch(from red l c h)` to modify colors. Preview the output and copy. Modern color manipulation.
Code Syntax Highlighter - Online Beautiful Code Preview
Paste code and get a beautifully highlighted preview with line numbers. Supports many languages. Copy as HTML. Pure frontend.
CSS Font Stack Generator - Online Fallback Fonts
Build a complete font‑stack for your website. Choose a primary font and get the best fallback options for different OS. Copy the CSS.
CSS Animation Library Browser - Online Preview & Copy Keyframes
Browse a collection of ready-to-use CSS animations (fade, slide, bounce). Click to preview, then copy @keyframes and class to your project. Local tool.
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.
Text Transform Functions Playground - Online Preview CSS
Type text and instantly see it rendered with text‑transform: uppercase, lowercase, capitalize, and full‑width. Copy CSS.
Local Font Viewer & Preview - Online Test Styles
Browse the fonts installed on your system and type a custom phrase to see how it looks. Uses Local Font Access API where available.
CSS Relative Color Playground - Online Manipulate Colors
Write CSS like `oklch(from red l c h)` to modify colors dynamically. Preview the output and copy the code.
HTML Headings Outline Generator - Online From Webpage
Enter a URL and see a nested list of all headings (h1‑h6). Check your document structure for SEO and accessibility. Pure fetch.
@scope CSS At‑Rule Playground - Online Scoped Styles
Write scoped CSS rules that apply only within a subtree. See the boundary limits and avoid naming conflicts. New browser feature.
CSS UI Pattern Library - Online Copy‑Paste Components
Browse a collection of common UI components (cards, modals, navbars) built with pure CSS. Preview and copy the HTML/CSS. Fast prototyping.
Emoji to CSS Content Code - Online ::before Pseudo Generator
Pick an emoji and get the exact CSS content property value with escaped Unicode. For inserting emojis via CSS.
CSS Smooth Scroll Demo - Online scroll‑behavior
Toggle scroll‑behavior: smooth and click anchor links to see the scrolling animation. Implement modern UX.
LESS to CSS Converter - Online Free Stylesheet Compiler
Compile LESS code to plain CSS in your browser. Check for syntax errors and get clean output. For legacy projects.
CSS Button Styler - Online Pure CSS Effects
Design beautiful buttons with gradients, shadows, and hover/active effects. No JavaScript required. Copy the CSS.
Scroll‑Driven Carousel Builder - Online CSS-Only Slider
Construct a CSS‑only carousel with scroll‑snap and scroll‑driven animations. Configurable gap, items, and progress indicator. Copy the HTML/CSS.
Famous Brand Colors - Online Quick Reference Palette
Search a library of famous company brand colors with hex codes. Copy any color instantly. For designers and marketers.
SVG URI Encoder - Online Optimized for CSS Background
Paste an SVG and get an optimized, URL‑encoded data URI for use in CSS backgrounds. Reduces file size and escapes characters.
CSS Modules Class Name Generator - Online Scoped Styles
Write global CSS and auto‑generate unique, scoped class names with source maps. Understand CSS Modules naming.
SCSS to CSS Converter - Online Free Sass Compiler
Paste your SCSS or Sass code and compile it to standard CSS. Basic sass.js engine runs in your browser. No server.
MIME Type ↔ Extension Lookup - Online Quick Reference
Search by MIME or file extension to see the corresponding type. Helpful when configuring web servers. Static.
SCSS to CSS Converter - Online Free Sass Compiler
Compile SCSS code to CSS directly in the browser using the official Sass.js library. Supports variables, mixins, nesting. No server upload required.
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.
HTML Outline Extractor - Online Heading Map from URL
Enter a URL and see a nested list of all h1‑h6 tags. Check document structure for SEO and accessibility.
SVG to CSS Background - Online Inline Code Generator
Paste or upload an SVG and convert it into a CSS background‑image data URI. Clean and ready to embed.