@casoon/dragonfly/effects/themes/gradients.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Farbverläufe
 * 
 * Diese Datei enthält verschiedene Farbverläufe für moderne UIs.
 * Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
 */

@keyframes gradient-shift {
    0% { background-position: 0% 50; }

    50% { background-position: 100% 50; }

    100% { background-position: 0% 50; }
}

@layer utilities {
    .gradient-primary {
        background: linear-gradient(
            45deg,
            var(--color-primary),
            var(--color-primary-light)
        );
    }

    .gradient-secondary {
        background: linear-gradient(
            45deg,
            var(--color-secondary),
            var(--color-secondary-light)
        );
    }

    .gradient-accent {
        background: linear-gradient(
            45deg,
            var(--color-accent),
            var(--color-accent-light)
        );
    }

    .gradient-rainbow {
        animation: gradient-shift 5s ease infinite;
        background: linear-gradient(
            45deg,
            #f00,
            #ff7f00,
            #ff0,
            #0f0,
            #00f,
            #4b0082,
            #8b00ff
        );
        background-size: 200% 200;
    }

    .gradient-metallic {
        background: linear-gradient(
            45deg,
            #e6e6e6,
            #fff,
            #e6e6e6
        );
    }

    .gradient-iridescent {
        animation: gradient-shift 5s ease infinite;
        background: linear-gradient(
            45deg,
            #f00,
            #ff7300,
            #fffb00,
            #48ff00,
            #00ffd5,
            #002bff,
            #7a00ff,
            #ff00c8,
            #f00
        );
        background-size: 200% 200;
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer utilities {
        .gradient-rainbow,
        .gradient-iridescent {
            animation: var(--animation-none);
        }
    }
}