UD5 Toolkit
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.
font‑palette CSS Playground - Online Color Fonts Explorer
Font Palette Playground
CSS color fonts explorer
Color Fonts Rock! 🎨
Tip: Color fonts (COLRv1) are supported in Chrome 101+, Edge 101+, Firefox 107+, and Safari 17+. Try different palettes to see the font transform!
Frequently Asked Questions
What is CSS font-palette?
The font-palette CSS property allows you to select a specific color palette from a color font (like COLRv0/v1 or SVG fonts). Color fonts contain multiple built-in palettes—such as normal, light, and dark—and you can switch between them or create entirely custom palettes using @font-palette-values.
What are color fonts (COLRv1)?
Color fonts are font files that include multiple colors, gradients, and even layered designs within the glyphs themselves. COLRv1 is the modern W3C standard for color fonts, supporting gradients, blends, and rich multi-colored glyphs. Popular COLRv1 fonts include Nabla, Bungee Spice, Foldit, and Honk, all available on Google Fonts.
How does @font-palette-values work?
The @font-palette-values at-rule lets you define a custom color palette for a specific font family. You can set a base-palette (0 for normal, 1 for light, 2 for dark) and then use override-colors to replace specific color slots with your own colors. Each slot is referenced by its index (0, 1, 2, etc.) and corresponds to a specific color layer in the font's design.
How many color slots does each font have?
It varies by font. Nabla has approximately 10 color slots (indices 0–9), while Bungee Spice has around 5–6 slots. The slots typically represent different parts of the glyph—shadows, midtones, highlights, outlines, and fill colors. Experiment with the color pickers above to discover how each slot affects the rendered text!
Which browsers support font-palette?
As of 2024, font-palette and @font-palette-values are supported in Chrome 101+, Edge 101+, Firefox 107+, and Safari 17+ (with partial support from Safari 15.4). On unsupported browsers, color fonts will still render using their default palette—a graceful fallback.
Can I use font-palette with regular (non-color) fonts?
No. The font-palette property only works with color fonts (COLRv0, COLRv1, or SVG fonts). Regular monochrome fonts (like Arial, Roboto, or Inter) don't have color palettes to switch. If you apply font-palette to a regular font, it will simply be ignored.
Where can I find more color fonts?
Google Fonts has a growing collection of COLRv1 color fonts—search for "color" in the Google Fonts library or filter by the "Color" technology tag. Some excellent options include Nabla, Bungee Spice, Foldit, Honk, Linefont, Video, and Noto Color Emoji (for emoji rendering). You can also find color fonts on independent foundries and font marketplaces.
What's the difference between base-palette 0, 1, and 2?
These correspond to the font's built-in palette variations: 0 = normal (the default, often vibrant), 1 = light (typically pastel or lighter tones), and 2 = dark (darker, moodier colors). Not all fonts define all three—some may only have palette 0. Using @font-palette-values, you can base your custom palette on any of these and then override specific slots.
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.
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.
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.
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.
CSS color‑mix() Visualizer - Online Blend in sRGB & OKLCH
Pick two colors and mix them in different color spaces with sliders. See the difference between sRGB and OKLCH mixing. Copy the code.
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.
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.
Text to Color Palette - Online Emotion to Hex
Type a word like 'sunset' or 'calm' and generate a color palette inspired by that mood. Simple associative mapping.
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.
CSS Button Styler - Online Pure CSS Effects
Design beautiful buttons with gradients, shadows, and hover/active effects. No JavaScript required. Copy the CSS.
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.
@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 Reset Generator - Online Custom Normalize Snippet
Build a custom CSS reset by toggling which elements to normalize. Copy the resulting stylesheet. Lean and clean.
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.
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.
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.
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.
Gradient Button CSS Generator – Online Modern UI Design
Design a modern button with gradients, shadows, and hover effects. Copy the clean CSS code.
CSS Vendor Prefix Remover - Online Clean Legacy Code
Paste CSS with vendor prefixes and get a clean version with only the standard property. Modernize your stylesheets.
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.
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.
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.
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.
Stylelint Config Generator - Online CSS Linter Setup
Set up Stylelint rules for your project by selecting extensions (SCSS, order, etc.). Output a valid .stylelintrc.
CSS Smooth Scroll Demo - Online scroll‑behavior
Toggle scroll‑behavior: smooth and click anchor links to see the scrolling animation. Implement modern UX.
CanIUse Quick Search - Online Browser Support Lookup
Offline‑first search of the CanIUse database. Type a CSS property, HTML element, or API and see global support percentages. Fast.
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.
Color to OKLCH Converter - Online Perceptually Uniform
Convert hex, RGB, or HSL into the modern OKLCH color space. See the preview and copy CSS oklch() value. Local.
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.