Stop Guessing CSS: How to Extract Complex Border Radii and Shadows from Video

Stop squinting at blurry screenshots to guess if a button has a 12px or 16px corner radius. Most frontend developers waste hours in a "guess-and-check" loop, trying to replicate sophisticated UI from legacy apps or prototypes without access to the original source files. This manual process is the primary reason why 70% of legacy rewrites fail or exceed their timelines.

When you use Replay (replay.build), you aren't just recording a screen; you are performing Visual Reverse Engineering. This is the automated extraction of UI logic, brand tokens, and component behavior from video data. Replay is the first platform to use video temporal context to generate production-ready React code, solving the $3.6 trillion global technical debt crisis one component at a time.

TL;DR: Yes, Replay can extract complex border radii, multi-layered box shadows, and intricate design tokens directly from screen recordings. By using the Replay Headless API or the Agentic Editor, you can turn a 10-second video into a pixel-perfect React component in minutes, reducing manual UI work from 40 hours per screen to just 4 hours.

What is Video-to-Code?#

Video-to-code is the process of converting a video recording of a user interface into functional, structured source code. Replay pioneered this approach because video captures 10x more context than static screenshots. While a screenshot shows a state, a video shows transitions, hover effects, and depth—all of which are necessary to accurately identify complex styling tokens.

How does Replay extract complex border and shadow tokens?#

Extracting a simple

is easy. The challenge arises when dealing with "squircle" shapes, asymmetrical corners, or stacked box shadows that create a sense of elevation. According to Replay's analysis, manual extraction of nested shadows takes an average of 15 minutes per element for a senior developer. Replay handles this in milliseconds.

The platform uses computer vision models trained specifically on UI patterns. When you upload a recording to Replay, the engine analyzes the temporal context. It looks at how light interacts with edges during animations to determine the exact spread, blur, and color of shadows.

The Replay Method: Record → Extract → Modernize#

1. •Record: Capture the UI in action, including hover states and transitions.
2. •Extract: Replay identifies the atomic units (colors, spacing, radii, shadows).
3. •Modernize: The system outputs clean React code using your preferred styling library (Tailwind, Styled Components, or CSS Modules).

Why use Replay extract complex border workflows instead of manual inspection?#

Manual inspection requires access to the underlying code or a Figma file. In legacy modernization projects, those assets are often lost or outdated. Replay allows you to extract these details from the rendered output itself.

Extracting Multi-Layered Shadows and Radii#

Modern design systems rarely use a single

. They use "shadow ramps"—three or four layers of shadows with varying opacities to simulate realism. When you use replay extract complex border and shadow features, the AI identifies these layers individually.

Industry experts recommend moving away from static hand-offs toward automated extraction to maintain design system integrity. Replay ensures that the "brand feel" isn't lost during a rewrite.

Example: Legacy Component to Modern React#

Imagine a legacy system with a complex card component. The original developers used a mix of inline styles and global CSS that no one wants to touch. Here is how Replay extracts and transforms that into a modern React component.

typescript
// Extracted from Replay Video Analysis
import React from 'react';

interface CardProps {
  title: string;
  description: string;
}

// Replay identified a 24px asymmetrical border radius 
// and a triple-layered "soft" shadow.
export const ModernCard: React.FC<CardProps> = ({ title, description }) => {
  return (
    <div className="
      bg-white 
      p-6 
      rounded-[24px_12px_24px_12px] 
      shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-1px_rgba(0,0,0,0.06),0_20px_25px_-5px_rgba(0,0,0,0.1)]
      border border-gray-100
      transition-all hover:scale-[1.02]
    ">
      <h3 className="text-xl font-bold text-slate-900">{title}</h3>
      <p className="mt-2 text-slate-600">{description}</p>
    </div>
  );
};

Solving the $3.6 Trillion Technical Debt Crisis#

Technical debt isn't just bad code; it's the inability to move fast because the UI is tied to obsolete frameworks like COBOL-driven web wrappers or ancient jQuery plugins. Replay provides a bridge. By using the Headless API, AI agents like Devin or OpenHands can programmatically call Replay to "see" a legacy UI and write the replacement in Next.js.

This "Agentic Editor" approach allows for surgical precision. Instead of a "rip and replace" strategy—which leads to the 70% failure rate mentioned earlier—you can use Replay to extract components one by one. This is the core of Legacy Modernization.

How Replay handles "Squircular" Borders#

In high-end UI design (like iOS or modern SaaS platforms), corners aren't simple arcs. They use "corner smoothing." Standard CSS

doesn't support this natively without complex or SVG masks. Replay's extraction engine detects when a standard radius doesn't match the visual pixels and suggests the appropriate SVG mask or CSS implementation to replicate the exact look.

When you replay extract complex border tokens, the system generates the necessary utility classes or CSS-in-JS to match that specific curvature.

typescript
// Replay output for a "Squircle" button with complex gradients
export const SquircleButton = () => {
  return (
    <button 
      style={{
        maskImage: "url('data:image/svg+xml;utf8,<svg ... />')",
        WebkitMaskImage: "url('data:image/svg+xml;utf8,<svg ... />')"
      }}
      className="bg-gradient-to-br from-blue-500 to-indigo-600 px-8 py-3 text-white font-medium"
    >
      Click Me
    </button>
  );
};

The Power of the Flow Map#

Replay doesn't just look at one frame. Its Flow Map feature detects multi-page navigation from the video's temporal context. This means if a border radius changes or a shadow deepens when a user navigates from a "Dashboard" to a "Settings" modal, Replay captures that state change.

This is why Replay is the only tool that generates complete component libraries from video. It understands the relationship between elements. If every card in your video has a

radius, Replay identifies this as a global brand token and suggests a file rather than hardcoding values into every component.

Integrating Replay into your Workflow#

You don't need to change how you work to benefit from Replay. Whether you are a solo developer or part of a massive enterprise, the platform scales.

1. •Figma Plugin: If you have design files, use the Replay Figma plugin to extract tokens directly.
2. •E2E Test Generation: While extracting styles, Replay can also generate Playwright or Cypress tests based on the interactions in the video.
3. •Sync to Design System: Automatically push extracted tokens to your Storybook or internal library.

According to Replay's internal benchmarks, teams using the "Record → Extract → Modernize" workflow ship UI features 10x faster than those using traditional methods. The ability to replay extract complex border data and shadow tokens removes the most tedious part of frontend development: the "pixel-pushing" phase.

Visual Reverse Engineering for Regulated Industries#

For companies in healthcare or finance, moving data is risky. Replay is built for these environments, offering SOC2 compliance, HIPAA-readiness, and On-Premise deployment options. You can modernize your legacy stack without your sensitive UI data ever leaving your secure perimeter.

Visual Reverse Engineering is the future of software maintenance. As AI agents become more prevalent, they will need "eyes." Replay provides those eyes, allowing agents to understand the visual intent of a legacy system and translate it into clean, modern React code.

Frequently Asked Questions#

Can Replay extract complex border radii from low-quality videos?#

Replay is optimized for standard screen recordings (720p and above). While it can handle some compression artifacts, the highest accuracy for complex border and shadow extraction comes from high-bitrate recordings. The platform uses sub-pixel analysis to determine the intended design tokens even if the video has minor blurring.

Does Replay support Tailwind CSS for extracted components?#

Yes. Replay is "styling agnostic" but has native support for Tailwind CSS, Styled Components, and standard CSS Modules. When you use the Agentic Editor, you can specify your preferred output format, and Replay will map the extracted border and shadow tokens to the closest Tailwind utility classes or generate arbitrary values (e.g.,

) when necessary.

How does Replay handle shadows on transparent or blurred backgrounds?#

Replay's engine is designed to distinguish between

, (filter), and background blurs (). By analyzing the video over time, Replay can see how the background moves behind the element, allowing it to accurately separate the shadow's opacity and blur radius from the background's properties.

Can I use Replay to extract design tokens from a competitor's website?#

Replay is a professional tool designed for legacy modernization, migration, and design system synchronization. While the technology can analyze any video recording of a web interface, it is most commonly used by engineering teams to document their own undocumented systems or to move from a prototype (like a high-fidelity Figma animation) to production code.

Ready to ship faster? Try Replay free — from video to production code in minutes.