About this snippet

Showcase financial data with this sleek crypto ticker. We designed a clean glassmorphism card and included an SVG sparkline chart, so your stats look incredible.

Size
2.9 KB
Uses
HTML, CSS
Loads
Nothing external
Views
108

Collections

Related snippets

<div class="crypto-card">
  <div class="crypto-header">
    <div class="crypto-title">
      <div class="crypto-icon">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10"></circle>
          <path d="M12 8v8"></path>
          <path d="M9 10h6"></path>
          <path d="M9 14h6"></path>
        </svg>
      </div>
      <span>Bitcoin</span>
    </div>
    <span class="crypto-badge">BTC</span>
  </div>
  
  <div class="crypto-price">$64,230.00</div>
  
  <div class="crypto-change positive">
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
      <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
      <polyline points="17 6 23 6 23 12"></polyline>
    </svg>
    +4.25%
  </div>
  
  <div class="crypto-chart">
    <svg viewBox="0 0 100 30" preserveAspectRatio="none" width="100%" height="100%">
      <path d="M0,25 C20,20 30,10 50,15 C70,20 80,5 100,2" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round"></path>
      <path d="M0,25 C20,20 30,10 50,15 C70,20 80,5 100,2 L100,30 L0,30 Z" fill="url(#grad)" opacity="0.2"></path>
      <defs>
        <linearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#10b981"></stop>
          <stop offset="100%" stop-color="transparent"></stop>
        </linearGradient>
      </defs>
    </svg>
  </div>
</div>
*, *::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";
  background: #0f172a;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

.crypto-card {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 24px;
  width: 100%;
  max-width: 320px;
  color: #ffffff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

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

.crypto-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 1.125rem;
}

.crypto-icon {
  background: #f59e0b;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}

.crypto-badge {
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
}

.crypto-price {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -1px;
}

.crypto-change {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.crypto-change.positive {
  color: #10b981;
}

.crypto-chart {
  width: 100%;
  height: 60px;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save