UI-компоненты

Стеклянная карточка

Карточка для лендингов и сайтов услуг. Подходит для описания специалиста, услуги или тарифного плана. Аккуратный дизайн помогает выделить важную информацию и привлекает внимание к кнопке действия.

Сложность: Лёгкая HTML CSS backdrop-filter gradients hover animation

Django UI

Glassmorphism Card

Эффектная карточка для портфолио, блока услуг или промо-секции.

Подробнее

<div class="glass-demo">
    <div class="glass-card">
        <span class="glass-card__badge">Django UI</span>

        <h2>Glassmorphism Card</h2>

        <p>
            Эффектная карточка для портфолио, блока услуг или промо-секции.
        </p>

        <a href="#" class="glass-card__button">
            Подробнее
        </a>
    </div>
</div>

.glass-demo {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.45), transparent 35%),
        radial-gradient(circle at bottom right, rgba(168, 85, 247, 0.35), transparent 35%),
        #020617;
    border-radius: 24px;
    padding: 40px;
}

.glass-card {
    max-width: 360px;
    padding: 32px;
    border-radius: 24px;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(18px);
    transform: translateY(0);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.glass-card:hover {
    transform: translateY(-10px);
    border-color: rgba(96, 165, 250, 0.9);
    box-shadow: 0 32px 100px rgba(37, 99, 235, 0.35);
}

.glass-card__badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 6px 12px;
    border-radius: 999px;
    color: #bfdbfe;
    background: rgba(59, 130, 246, 0.18);
    border: 1px solid rgba(96, 165, 250, 0.45);
    font-size: 13px;
}

.glass-card h2 {
    margin-bottom: 14px;
    font-size: 28px;
}

.glass-card p {
    margin-bottom: 24px;
    color: #cbd5e1;
}

.glass-card__button {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.glass-card__button:hover {
    transform: scale(1.05);
    opacity: 0.92;
}