Back to Snippets

Modern Skeleton Wireframe Reveal CSS

Two layers stacked in the same box. The top layer is a finished profile card and the bottom layer is a blueprint grid with dashed placeholder boxes. Hovering wipes the top layer off.

The wipe is a single clip-path inset animating from zero to 100 percent on its right side, which collapses the visible part of the front layer toward the left edge. Because clip-path is animatable, the whole effect is one transition on one property.

The blueprint boxes are placed with inline styles in the markup, so you can move them to match your own layout without touching the stylesheet. Both layers share the same border radius, otherwise the square corners of the blueprint show through while the wipe is running.

904

#css

#skeleton

#wireframe

#blueprint

#hover

#reveal

#grid

#modern ui

#developer

#portfolio

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #f8fafc;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.blueprint-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 280px;
  border-radius: 24px;
  background: #0f172a;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  cursor: crosshair;
}

/* Bottom Layer: The Architectural Blueprint */
.wireframe-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  z-index: 1;
  overflow: hidden;
}

.wf-grid {
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(56, 189, 248, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.2) 1px, transparent 1px);
  background-size: 20px 20px;
}

.wf-box {
  position: absolute;
  border: 1px dashed #38bdf8;
  background: rgba(56, 189, 248, 0.1);
}

/* Top Layer: The High-Fidelity UI */
.ui-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 24px;
  z-index: 2;
  padding: 30px;
  border: 1px solid #e2e8f0;
  /* The Magic: A perfectly clean wipe effect */
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.blueprint-card:hover .ui-layer {
  /* Wipes the top layer completely to the right */
  clip-path: inset(0 100% 0 0);
}

.ui-profile {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 35px;
}

.avatar-img {
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
}

.ui-info h3 {
  margin: 0 0 6px 0;
  color: #0f172a;
  font-size: 1.25rem;
}

.ui-info p {
  margin: 0;
  color: #64748b;
  font-size: 0.95rem;
  font-weight: 500;
}

.ui-graphic {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 20px;
  border-radius: 16px;
}

.ui-graphic p {
  margin: 0;
  color: #475569;
  line-height: 1.6;
  font-size: 0.95rem;
}

<div class="blueprint-card">
  
  
  <div class="wireframe-layer">
    <div class="wf-grid"></div>
    <div class="wf-box" style="top: 30px; left: 30px; width: 80px; height: 80px; border-radius: 50%;"></div>
    <div class="wf-box" style="top: 40px; left: 130px; width: 180px; height: 20px;"></div>
    <div class="wf-box" style="top: 75px; left: 130px; width: 120px; height: 16px;"></div>
    
    <div class="wf-box" style="bottom: 30px; left: 30px; width: calc(100% - 60px); height: 100px; border-radius: 16px;"></div>
  </div>
  
  
  <div class="ui-layer">
    <div class="ui-profile">
      <img src="https://placehold.co/80x80/3b82f6/ffffff?text=Avatar" alt="User" class="avatar-img">
      <div class="ui-info">
        <h3>System Architect</h3>
        <p>Frontend Division</p>
      </div>
    </div>
    
    <div class="ui-graphic">
      <p>Hover over this card to trigger a flawless clip-path wipe, exposing the foundational blueprint architecture securely beneath.</p>
    </div>
  </div>
  
</div>

Modern Skeleton Wireframe Reveal CSS

Share Code Snippet