IconVault logoIconVault
Sign in

CSS attr() Playground - Interactive CSS Lab | IconVault

Style elements from HTML data attributes with typed CSS attr(). Live demos for length, number, color and string types with fallbacks. Free, in your browser.

All tools

CSS attr() Playground

Style from data attributes with typed attr() and fallbacks

5 of 5 free uses left
Box data-size200px

Drives width: attr(data-size type(<length>))

Progress data-value64%

Drives calc(attr(data-value type(<number>)) * 1%)

Swatch data-color

#0d9488

Drives background: attr(data-color type(<color>))

Label data-note

Classic string content: attr(data-note), works everywhere.

Length demo

data-size="200px"

Number demo

data-value="64"

Color demo

data-color="#0d9488"

String demo

Status

data-note="typed attr() is live"

attr() types at a glance

TypeExampleAccepts
<length>width: attr(data-w type(<length>), 120px);px, rem, em...
<number>opacity: attr(data-o type(<number>), 1);unitless numbers
<percentage>width: attr(data-p type(<percentage>), 50%);for widths, stops
<color>color: attr(data-c type(<color>), black);hex, rgb(), named
<string>content: attr(data-label);classic, universal

Copy the CSS

/* attr() reads a data-* attribute and casts it to a CSS type.
   Syntax: attr(name type(<type>), fallback) */

.attr-box {
  /* data-size="180px" drives the width, 120px if missing */
  width: attr(data-size type(<length>), 120px);
  height: 64px;
}

.attr-progress {
  /* data-value="72" * 1% = 72% width */
  width: calc(attr(data-value type(<number>), 0) * 1%);
  height: 12px;
  border-radius: 999px;
  background: var(--primary);
}

.attr-swatch {
  /* data-color="#0d9488" drives the fill, gray if invalid */
  background: attr(data-color type(<color>), #9ca3af);
}

.attr-label::after {
  /* classic string attr(), works in every browser */
  content: attr(data-note);
}

5 of 5 free copies left.

About this tool

IconVault's CSS attr() Playground teaches the new typed attr() function with live, editable demos. Move the sliders and pickers to change data attributes on real elements, and watch the width, progress bar, swatch color and label text update through pure CSS. You will see exactly how type() casting works, what happens when an attribute is missing or invalid, and how fallbacks keep your design safe. It is free and runs fully in your browser with no setup.

Typed attr() turns HTML data attributes into a styling API: set data-size="180px" and CSS reads it as a real length, set data-value="72" and multiply it into a percentage, set data-color and paint with it. The playground includes the classic string content: attr() form that works in every browser, a full type reference table, and a copyable stylesheet you can paste into any project. Browsers without typed attr() get an honest simulation note plus the real syntax, which needs Chrome 133+ or a recent Edge.

Frequently asked questions

Popular searches

css attr()css attr functionattr() typetyped attr csscss attr data attributeattr(data type(<length>))css attr fallbackattr() css examplecss attr tutorialcss style from data attributesdata attributes css stylingattr(data-value)css attr color typeattr type(<number>)attr type(<color>)css attr browser supportcss attr chrome 133attr() mdncss attr() syntaxhow to use css attr()css attr() playgroundlearn css attr()attr() content propertycontent attr(data-label)css attr stringcss data attribute widthprogress bar data attribute csscss attr() calcattr() in calc()css attr percentagecss attr() fallback valuecss attr invalid valuetyped attr() examplecss attr() 2026css attr() not workingattr() firefoxattr() safaricss attr() generatorcss attr() demointeractive css attr demodata-* attributes stylinghtml data attributes css trickscss attr() vs css variablescss custom properties attr()attr() length typeattr() number typecss attr() copy pastecss attr() cheat sheetcss attr() referencecss attr() value typesattr() type checking css

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →