Color from Attribute attr() type(<color>)
Set background-color directly from a data-color attribute. No JavaScript needed.
Live Demo
Size from Attribute attr() type(<length>)
Control width and height using data-width / data-height attributes with length units.
Live Demo
Type Conversion attr(name type, fallback)
The full syntax: attr(<attr-name> type(<syntax>), <fallback>). Here are the supported types in action.
Type Examples
Dynamic Theming Real-time
Change data-* attributes on the fly and watch CSS update instantly. No JS style manipulation — pure attr().
Theme Controls
Themed Card
This card's background, text color, accent border, border-radius, and padding are all driven by data-* attributes through CSS attr().
Change the controls to see live updates.
Data Table Styling Row colors & bar widths
Table rows use data-row-color for background; cells use data-bar-width for inline bar charts. All via attr().
Live Demo
Print Stylesheet attr(href) — Classic
The original attr() use case: showing URLs after links in print stylesheets. This works in all browsers.
Print Preview
Tooltip Builder Pure CSS
Classic content: attr(data-tooltip) — pure CSS tooltips with no JavaScript.
Live Demo
Full Editor Presets
Pick a preset or write your own HTML + CSS using attr(). Live preview updates as you type.
Editor
Type Reference
All supported type keywords for attr(name type(<syntax>), fallback).
| Type | Syntax | Example | Use Case |
|---|---|---|---|
string | attr(data-x type(<string>)) | data-x="hello" | Text content, custom properties |
color | attr(data-x type(<color>)) | data-x="#ff6600" | Backgrounds, borders, text color |
length | attr(data-x type(<length>)) | data-x="200px" | Width, height, margin, padding |
number | attr(data-x type(<number>)) | data-x="0.5" | Opacity, flex-grow, scale |
integer | attr(data-x type(<integer>)) | data-x="3" | z-index, order, column-count |
angle | attr(data-x type(<angle>)) | data-x="45deg" | Rotation, gradients, hue |
time | attr(data-x type(<time>)) | data-x="300ms" | Transition duration, animation delay |
frequency | attr(data-x type(<frequency>)) | data-x="440Hz" | Speech synthesis (rare) |
flex | attr(data-x type(<flex>)) | data-x="2fr" | Grid track sizing |
percentage | attr(data-x type(<percentage>)) | data-x="50%" | Width, opacity, position |
url | attr(data-x url) | data-x="img.png" | Background images, list markers |
ident | attr(data-x ident) | data-x="bold" | Font weight keywords, display |