→ Prajwal Hallale
→ Glassmorphism Dashboard Card Component

Glassmorphism Dashboard Card Component

This Example is contributed by Prajwal Hallale, on 26-Feb-2025. It is responsive. similar terms for this example are Glass Effect,Glass Morphism,Statistic,Data Visualization,Statistical Overview,Statistics Display,Stats,Info,Show info,Statistics

Glassmorphism Stats Display Admin Dashboard

Author Prajwal Hallale

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism Dashboard Card</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(45deg, #8b5cf6, #ec4899);
      background-attachment: fixed;
      padding: 20px;
    }

.container {
      position: relative;
      z-index: 1;
    }

.container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
      border-radius: 20px;
      z-index: -1;
    }

.dashboard-card {
      position: relative;
      width: 350px;
      min-height: 420px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(15px);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
      padding: 30px;
      overflow: hidden;
    }

.dashboard-card::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 200px;
      height: 200px;
      background: radial-gradient(rgba(255, 255, 255, 0.4), transparent);
      border-radius: 50%;
      pointer-events: none;
    }

.card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }

.card-title {
      color: white;
      font-size: 1.5rem;
      font-weight: 600;
    }

.menu-icon {
      color: white;
      width: 24px;
      height: 24px;
      cursor: pointer;
    }

.menu-icon div {
      width: 4px;
      height: 4px;
      background: white;
      border-radius: 50%;
      margin: 2px;
    }

.stats {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
    }

.stat-card {
      background: rgba(255, 255, 255, 0.15);
      padding: 15px;
      border-radius: 15px;
      text-align: center;
      width: 48%;
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: transform 0.3s, box-shadow 0.3s;
    }

.stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

.stat-value {
      font-size: 1.8rem;
      font-weight: 700;
      color: white;
      margin-bottom: 5px;
    }

.stat-label {
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.7);
    }

.activity {
      margin-bottom: 25px;
    }

.activity-title {
      color: white;
      font-size: 1.1rem;
      margin-bottom: 15px;
      font-weight: 500;
    }

.activity-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

.activity-item:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

.activity-icon {
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 15px;
    }

.activity-content {
      flex: 1;
    }

.activity-text {
      color: white;
      font-size: 0.9rem;
      margin-bottom: 5px;
    }

.activity-time {
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.75rem;
    }

.action-button {
      background: rgba(255, 255, 255, 0.2);
      color: white;
      border: none;
      padding: 12px;
      border-radius: 50px;
      font-weight: 500;
      cursor: pointer;
      width: 100%;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

.action-button:hover {
      background: white;
      color: #8b5cf6;
    }

.menu-dots {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="dashboard-card">
      <div class="card-header">
        <h2 class="card-title">Activity Dashboard</h2>
        <div class="menu-dots">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>

<div class="stats">
        <div class="stat-card">
          <div class="stat-value">87%</div>
          <div class="stat-label">COMPLETION</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">32</div>
          <div class="stat-label">TASKS DONE</div>
        </div>
      </div>

<div class="activity">
        <h3 class="activity-title">Recent Activity</h3>

<div class="activity-item">
          <div class="activity-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"
              stroke-linecap="round" stroke-linejoin="round">
              <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
              <path
                d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z">
              </path>
            </svg>
          </div>
          <div class="activity-content">
            <div class="activity-text">Project Milestone Completed</div>
            <div class="activity-time">Today, 9:48 AM</div>
          </div>
        </div>

<div class="activity-item">
          <div class="activity-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"
              stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
          </div>
          <div class="activity-content">
            <div class="activity-text">Team Meeting Scheduled</div>
            <div class="activity-time">Yesterday, 2:30 PM</div>
          </div>
        </div>

<div class="activity-item">
          <div class="activity-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"
              stroke-linecap="round" stroke-linejoin="round">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
            </svg>
          </div>
          <div class="activity-content">
            <div class="activity-text">New Team Member Added</div>
            <div class="activity-time">Feb 25, 10:15 AM</div>
          </div>
        </div>
      </div>

<button class="action-button">View All Activities</button>
    </div>
  </div>
</body>

</html>

Related Examples

Glassmorphic Card Dashboard Grid with Hover Effects
Premium dashboard component with frosted glass effects, dynamic metrics display, and interactive hover states

Author:
Prajwal Hallale

10 months ago
Product Grid for Ecommerce Website
Premium product grid with hover animation

Author:
Anika

9 months ago
Gradient Morphing Card with 3D Hover Effect
Elegant floating card component with dynamic gradient animation and smooth 3D hover interactions, perfect for showcasing premium content or user profiles.

Author:
Anonymous

10 months ago
Gradient Bordered Card

Author:
Anonymous

10 months ago
CTA Card
Stunning gradient service cards with smooth hover animations and interactive elements, perfect for showcasing features or services.

Author:
Prajwal Hallale

10 months ago
Stats Card with Dynamic Progress Indicators

Author:
Alexander B

10 months ago
Gradient Morphing Card with Hover Animation
Stunning profile card with dynamic gradient background animation and glassmorphism effects, perfect for showcasing user profiles or team members.

Author:
Emma Thompson

10 months ago
Data Card with Hover Effects
Engaging KPI card that displays key metrics with interactive hover effects and a progress bar.

Author:
Laura Mitchell

10 months ago
Payment success UI design

Author:
Anika

9 months ago
Animated Profile Card with Hover Effects and Social Links

Author:
Priya Sharma

10 months ago
User Profile Card
A sleek and modern profile card featuring glass morphism effects, subtle gradients, and smooth hover animations for enhanced user interaction.

Author:
Emma Thompson

10 months ago
Animated Progress Bar with Percentage
Visually engaging circular progress bar with smooth animations and percentage display. Ideal for dashboards and loading screens.

Author:
Anonymous

10 months ago

Didn't find component you were looking for?

Search from 500+ components