CSS @property

@property Features

syntax: '<color>';

initial-value: #ff0000;

inherits: true;

transition: --my-prop 1s;

🔹 Basic @property Usage

CSS @property rule enables custom property registration with defined syntax, inheritance behavior, and initial values. This modern CSS feature allows developers to create typed custom properties (CSS variables) with specific syntax definitions, enabling type checking, constraint validation, and transitions/animations that wouldn't work with unregistered custom properties. For example, registering a color property with @property --main-color { syntax: '<color>'; inherits: true; initial-value: #3b82f6; } ensures only valid color values can be assigned. This enhances code reliability, enables smoother animations for custom properties, and provides better developer tooling support through defined property characteristics and constraints.

/* Define custom color property */
@property --theme-color {
  syntax: '<color>';
  initial-value: #3498db;
  inherits: false;
}

/* Use the custom property */
.box {
  background-color: var(--theme-color);
  width: 100px;
  height: 100px;
  border-radius: 8px;
}

<div class="box"></div>

🔹 Animatable Properties

CSS custom properties (CSS variables) are fully animatable using transitions and keyframes, enabling dynamic visual effects without JavaScript. Properties like --rotate and --scale can be interpolated smoothly, allowing for interactive rotations, color shifts, and transformations. This technique enhances UI feedback and micro-interactions, improving user engagement and providing modern, performant animations directly within stylesheets for better maintainability and smoother performance across web projects.

/* Define animatable angle property */
@property --rotation {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.rotating-box {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-radius: 12px;
  transform: rotate(var(--rotation));
  transition: --rotation 0.5s ease;
}

.rotating-box:hover {
  --rotation: 180deg;
}

<div class="rotating-box"></div>

🔹 Number Properties

Number-based custom properties in CSS enable dynamic calculations and responsive design logic directly within stylesheets. Using calc() with variables like --size or --margin allows for scalable layouts, proportional spacing, and theme-aware dimensions. This approach supports design systems, modular scaling, and consistent spacing tokens, improving maintainability and enabling real-time adjustments across breakpoints without hard-coded values, which enhances both developer workflow and front-end adaptability.

/* Define number property */
@property --scale-factor {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}

.scalable-element {
  width: 60px;
  height: 60px;
  background: #9b59b6;
  border-radius: 50%;
  transform: scale(var(--scale-factor));
  transition: --scale-factor 0.3s ease;
}

.scalable-element:hover {
  --scale-factor: 1.5;
}

<div class="scalable-element"></div>

🔹 Complex Animation Example

Complex CSS animations combine multiple custom properties—such as --rotate, --scale, and --color—into coordinated keyframe sequences. This technique enables sophisticated interactive effects like morphing cards, animated loaders, and hover-triggered transformations without JavaScript. By leveraging @keyframes and CSS transitions, developers can create performant, GPU-accelerated motion design that enhances user experience, provides visual feedback, and adheres to modern web animation best practices for smooth, accessible motion.

/* Define multiple properties */
@property --hue {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

@property --size {
  syntax: '<length>';
  initial-value: 50px;
  inherits: false;
}

.animated-circle {
  width: var(--size);
  height: var(--size);
  background: hsl(var(--hue), 70%, 60%);
  border-radius: 50%;
  transition: --hue 2s ease, --size 0.5s ease;
  animation: colorCycle 3s infinite;
}

@keyframes colorCycle {
  0% { --hue: 0; }
  33% { --hue: 120; }
  66% { --hue: 240; }
  100% { --hue: 360; }
}

.animated-circle:hover {
  --size: 80px;
}

<div class="animated-circle"></div>

🔹 Browser Support

CSS custom properties enjoy broad modern browser support, including Chrome, Firefox, Safari, and Edge, with partial support in IE11 via fallbacks or polyfills. Developers should use feature detection with @supports rules and provide static fallback values for compatibility. Checking resources like Can I Use ensures animations, variables, and modern layout techniques work reliably across environments, enabling progressive enhancement and consistent user experiences while maintaining graceful degradation for older browsers.

/* Fallback for unsupported browsers */
.element {
  background: blue; /* fallback */
  background: var(--custom-color, blue);
}