cardanimatedglassmorphismdashboardmetricscss
3D Glassmorphism Metric Card

Анимированная 3D карточка метрик в стиле Glassmorphism. Отображает основные и вспомогательные данные. Идеально для дашбордов и аналитики.
Live Preview
Prompt


<head>
  <meta charset="UTF-8">
  <title>3D Glass Card</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    /* ---------- Base ---------- */

    * {
      box-sizing: border-box;
      font-family: Inter, system-ui, sans-serif;
    }

    body {
      background: #050505;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }

    /* ---------- 3D Setup ---------- */

    .perspective-container {
      perspective: 1200px;
    }

    /* Main tilted card */

    .tilted-plane {
      width: 360px;
      height: 280px;
      padding: 24px;
      border-radius: 24px;

      transform-style: preserve-3d;
      transform: rotateX(20deg) rotateY(-15deg) rotateZ(5deg);

      position: relative;
    }

    /* ---------- Glass Effect ---------- */

    .glass-panel {
      background: linear-gradient(145deg,
          rgba(255, 255, 255, 0.05),
          rgba(255, 255, 255, 0.01));

      backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, 0.08);

      box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    }

    /* ---------- Floating Cards ---------- */

    .floating-card {
      position: absolute;
      display: flex;
      gap: 10px;
      align-items: center;

      padding: 10px 12px;
      border-radius: 14px;

      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.08);

      font-size: 12px;

      animation: float 4s ease-in-out infinite;
    }

    .float-delay {
      animation-delay: 1s;
    }

    /* ---------- Animations ---------- */

    @keyframes float {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-12px);
      }
    }

    /* ---------- Content Styling ---------- */

    .title {
      font-size: 13px;
      letter-spacing: 1px;
      color: #9ca3af;
      text-transform: uppercase;
    }

    .value {
      font-size: 34px;
      font-weight: 300;
      margin-top: 4px;
    }

    /* Mini badge */

    .badge {
      margin-left: auto;
      font-size: 11px;
      color: #34d399;
    }

    /* Icon bubble */

    .icon-box {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);

      display: flex;
      align-items: center;
      justify-content: center;

      color: #34d399;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <div class="perspective-container">

    <!-- MAIN CARD -->
    <div class="tilted-plane glass-panel">

      <div class="title">Throughput</div>
      <div class="value">+Dx.98</div>

      <!-- FLOATING CARD RIGHT -->
      <div class="floating-card" style="top:40px; right:-30px;">
        <div class="icon-box">↓</div>
        <div>
          <div style="color:#9ca3af">Telemetry</div>
          <div>4.2 TB</div>
        </div>
        <div class="badge">SYNC</div>
      </div>

      <!-- FLOATING CARD LEFT -->
      <div class="floating-card float-delay" style="bottom:30px; left:-40px;">
        <div class="icon-box" style="color:#60a5fa">↑</div>
        <div>
          <div style="color:#9ca3af">Packets</div>
          <div>19M Ops</div>
        </div>
        <div class="badge" style="color:#60a5fa">BNB</div>
      </div>

    </div>

  </div>

</body>

</html>
All Prompts