CSS

CSS Glassmorphism UI Kit

Create frosted glass UI components with backdrop-filter, blur, and transparency effects.

CSSGlassmorphismUI KitModern
Thumbnail for CSS Glassmorphism UI Kit

Overview

Create frosted glass UI components with backdrop-filter, blur, and transparency effects.

HTML Structure

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Glassmorphism UI Kit</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>CSS Glassmorphism UI Kit</h1>
        </header>
        <main class="content">
            <div class="card">
                <div class="card-body">
                    <h2 class="card-title">Example Component</h2>
                    <p class="card-text">Demonstrating modern CSS techniques.</p>
                </div>
            </div>
        </main>
    </div>
</body>
</html>

Core Styles

css
/* Custom Properties */
:root {
    --color-primary: #6366f1;
    --color-secondary: #8b5cf6;
    --color-surface: #ffffff;
    --color-text: #1e293b;
    --radius: 12px;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Card Component */
.card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

/* Responsive Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --color-surface: #1e293b;
        --color-text: #f8fafc;
    }
}

Advanced Techniques

css
/* Animated gradient border */
.gradient-border {
    position: relative;
    padding: 3px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    filter: blur(12px);
    opacity: 0;
    transition: opacity var(--transition);
    z-index: -1;
}

.gradient-border:hover::before {
    opacity: 0.6;
}

/* Scroll-driven animation */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-on-scroll {
    animation: fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

Browser Support

- Modern Evergreen browsers - CSS custom properties: 95%+ support - Container queries: 90%+ support - \@layer\ cascade layers: 93%+ support

Tags

- CSS - Glassmorphism - UI Kit - Modern

Related Projects

Screenshot of CSS Responsive Email Template project
CSSNov 19, 2024

CSS Responsive Email Template

Build a cross-client email template with table layouts, inline styles, and media queries.

CSSEmailResponsiveTemplate
Read more → Source
Screenshot of CSS Clip-Path Shape Morphing project
CSSNov 15, 2024

CSS Clip-Path Shape Morphing

Create animated shape transitions using clip-path polygons and CSS transitions.

CSSClip-PathShapesAnimation
Read more → Source
Screenshot of CSS Gradient Pattern Backgrounds project
CSSNov 11, 2024

CSS Gradient Pattern Backgrounds

Generate repeating geometric patterns using CSS gradients without any image files.

CSSGradientsPatternsBackgrounds
Read more → Source

Comments (0)

Leave a Comment

No comments yet. Be the first to comment!