16 CSS Fade In Animation Designs 02 / 16

Clip-Path Inset Reveal

A cyberpunk status panel that sweeps into view from left using clip-path: inset(0 100% 0 0 round 16px) animated to inset(0 0% 0 0), revealing content like a shutter opening.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="fi-02">
  <div class="fi-02__panel">
    <span class="fi-02__label">System Status</span>
    <div class="fi-02__title">Neural Core<br>Online</div>
    <div class="fi-02__bar"></div>
    <p class="fi-02__desc">All subsystems operational. Processing at peak efficiency with zero latency degradation.</p>
    <div class="fi-02__stats">
      <div class="fi-02__stat"><span>99.9%</span><small>Uptime</small></div>
      <div class="fi-02__stat"><span>0.4ms</span><small>Latency</small></div>
      <div class="fi-02__stat"><span>4.2TB</span><small>Processed</small></div>
    </div>
  </div>
</div>
.fi-02{
  --bg:#06060f;--neon:#00ffe0;--neon2:#ff006e;--text:#e0fff9;
  font-family:'Inter',sans-serif;
  min-height:320px;border-radius:20px;
  display:grid;place-items:center;
  padding:40px;overflow:hidden;position:relative;
}
.fi-02 *,.fi-02 *::before,.fi-02 *::after{box-sizing:border-box;margin:0;padding:0}
.fi-02 ::selection{background:var(--neon);color:#000}

/* clip-path reveal: inset(0 100% 0 0) → inset(0 0% 0 0) */
.fi-02__panel{
  background:linear-gradient(135deg,rgba(0,255,224,.06),rgba(255,0,110,.06));
  border:1px solid rgba(0,255,224,.2);
  border-radius:16px;padding:32px 40px;
  text-align:center;max-width:500px;
  clip-path:inset(0 100% 0 0 round 16px);
  animation:fi-02-clip-reveal .9s cubic-bezier(.77,0,.18,1) .2s forwards;
}
.fi-02__label{
  font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--neon);margin-bottom:16px;display:block;
}
.fi-02__title{
  font-family:'Orbitron',monospace;font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:900;color:var(--text);margin-bottom:12px;
  text-shadow:0 0 20px rgba(0,255,224,.4);
}
.fi-02__bar{
  height:3px;background:linear-gradient(90deg,var(--neon),var(--neon2));
  border-radius:2px;margin:16px 0;
}
.fi-02__desc{font-size:.9rem;color:rgba(224,255,249,.6);line-height:1.6}
.fi-02__stats{
  display:flex;gap:24px;justify-content:center;margin-top:24px;
}
.fi-02__stat span{display:block;font-family:'Orbitron',monospace;font-size:1.4rem;font-weight:700;color:var(--neon)}
.fi-02__stat small{font-size:.7rem;color:rgba(224,255,249,.5);text-transform:uppercase;letter-spacing:.1em}

@keyframes fi-02-clip-reveal{
  to{clip-path:inset(0 0% 0 0 round 16px)}
}
@media(prefers-reduced-motion:reduce){
  .fi-02 *{animation:none!important;clip-path:none!important}
}

How this works

The panel starts with clip-path: inset(0 100% 0 0 round 16px) — the right inset is 100%, meaning the visible area is zero-width and the element is invisible. The keyframe animates that second value to 0%, progressively revealing the panel from left to right like a wipe transition. The round 16px parameter preserves the border-radius during the clip.

This technique keeps the element in the DOM and accessible while visually hidden, unlike display: none. The cubic-bezier(.77, 0, .18, 1) is a strong ease-in-out — slow start, then a confident sweep — giving the reveal momentum. Dimensions, padding, and layout are fully rendered even at zero visible width, so there's no layout shift.

Customize

  • Reverse the direction by changing inset(0 100% 0 0) to inset(0 0 0 100%) for a right-to-left reveal.
  • Change the wipe axis by using inset(100% 0 0 0) for a top-down reveal instead.
  • Speed up the reveal by changing duration from .9s to .5s for a sharper, more mechanical feel.
  • Add a secondary element inside the panel with its own delayed clip-path reveal for a layered effect.

Watch out for

  • The round keyword in clip-path: inset() requires all four sides to be specified for cross-browser support in older Chromium versions — use inset(0 100% 0 0 round 16px) not shorthand.
  • Text inside a clip-path-hidden element is still accessible by keyboard and screen readers — it is only visually hidden, so this is accessible by default.
  • Safari 14 and earlier have partial clip-path animation support; always test — the element may appear at full opacity with no animation rather than revealing from left.

Browser support

ChromeSafariFirefoxEdge
55+ 13.1+ 54+ 55+

clip-path animation requires webkit prefix on Safari < 13.1

More from 16 CSS Fade In Animation Designs

Skew Sweep FadeRadial Clip-Path Mask RevealGreyscale to Color Saturate FadeRotateY Flip Card FadeGlitch Flash Multi-Step FadeScroll-Triggered Observer FadeWord-by-Word Split FadeCascade Letter Drop FadePure Opacity Hero FadeBlur Defocus FadeStaggered Grid Card FadeDirectional Slide-Fade Up
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →