Glossy 3D Number Icon Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="icon-card-559"><span class="num">6</span></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.icon-card-559 { width: 130px; height: 130px; background: radial-gradient(100% 100% at 50% 0%, #1c2333 0%, #0d1117 100%); border-radius: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 40px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.05); margin: auto; transition: transform 0.3s ease; cursor: pointer; }
.icon-card-559:hover { transform: translateY(-4px) scale(1.02); }
.icon-card-559 .num { font-family: system-ui, sans-serif; font-size: 72px; font-weight: 900; background: linear-gradient(180deg, #60a5fa 0%, #1d4ed8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 12px rgba(37,99,235,0.4)); }