Custom Property
CSS Custom Property (Variable)
A user-defined property (--name) that stores reusable values, accessible via the var() function.
Detalle técnico
CSS Custom Propertys (--*) differ from preprocessor variables: they cascade, inherit, and can be modified at runtime with JavaScript via element.style.setProperty(). They participate in the cascade and specificity system. The var() function accepts a fallback value: var(--color, #000). Custom properties enable dynamic theming, design tokens, and component-scoped styling without JavaScript framework overhead. They are computed at used-value time, enabling animations and transitions on custom properties.
Ejemplo
```css
:root {
--color-primary: oklch(0.65 0.24 265);
--spacing-md: 1.5rem;
--radius: 0.5rem;
}
.btn {
background: var(--color-primary);
padding: var(--spacing-md);
border-radius: var(--radius);
}
```
Herramientas relacionadas
C
CSS Minifier
C
CSS Beautifier
C
CSS Gradient Generator
C
CSS Box Shadow Generator
C
CSS Flexbox Generator
C
CSS Grid Generator
C
CSS Animation Generator
C
CSS Border Radius Generator
C
CSS Text Shadow Generator
C
CSS Transform Generator
C
CSS Unit Converter
C
CSS Color Converter
M
Media Query Generator
C
CSS Filter Effects
C
CSS Clip-Path Generator