Is this supported in all modern web browsers?

Yes. CSS `@property` is supported in 100% of modern web browsers including Chrome, Edge, Safari 16.4+, and Firefox 128+.

Updated: August 2026 • Verified v1.2

Pure CSS Animated Rotating Gradient Border Generator

Creative & DesignDesign

Local Browser Execution: Your input is processed locally in your browser and is not sent to UTL servers.

@property --angle { syntax: '<angle>'; } background: conic-gradient(from var(--angle), ...);

Was this calculation helpful?

Understanding Your Results

Adjusts gradient colors, border thickness, corner radius, rotation speed, and ambient glow blur, rendering a live card preview and generating modern CSS `@property --angle` and `conic-gradient` code.

Practical Guidance & Next Steps

Using CSS `@property` enables GPU-accelerated angle interpolation without expensive DOM re-paints.

What is this?

A web design utility that creates smooth, GPU-accelerated animated gradient borders using modern CSS conic gradients and Houdini properties.

How does it work?

1. Customize three gradient stop colors and border radius. 2. Adjust animation speed and outer ambient glow intensity. 3. Copy the production CSS snippet in 1 click.

Why use it?

Adds high-converting modern visual polish to pricing tiers and call-to-action cards.

Technical Scope & Calculation Limitations

Generates pure CSS modern Houdini / pseudo-element syntax.

Frequently Asked Questions

By declaring a custom CSS property `@property --angle { syntax: '<angle>'; }`, browsers can interpolate angle values from `0deg` to `360deg` in `@keyframes`, smoothly rotating the conic-gradient.

Windows Desktop & Widget Options