CSS

CSS Gradient Pattern Backgrounds

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

CSSGradientsPatternsBackgrounds
Thumbnail for CSS Gradient Pattern Backgrounds

Overview

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

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 Gradient Pattern Backgrounds</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>CSS Gradient Pattern Backgrounds</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 - Gradients - Patterns - Backgrounds

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 Container Queries Layout project
CSSNov 6, 2024

CSS Container Queries Layout

Use container queries to build truly component-responsive layouts without JS.

CSSContainer QueriesResponsiveModern
Read more → Source

Comments (0)

Leave a Comment

No comments yet. Be the first to comment!