Gradient Hintergründe und Glassy Cards erstellen

Veröffentlicht am 22. Januar 2026

Moderne Webdesigns setzen oft auf elegante Gradient-Hintergründe und glassmorphe (glassy) Cards. In diesem Tutorial zeige ich dir, wie du diese Effekte mit Tailwind CSS und CSS erstellen kannst.

1. Grundlagen: Gradient-Hintergründe

Gradients können mit Tailwind CSS oder custom CSS erstellt werden. Hier sind einige Beispiele:

Einfacher linearer Gradient

<div class='bg-gradient-to-r from-blue-500 to-purple-600'>
  <!-- Inhalt -->
</div>

Radialer Gradient mit CSS

<div style='background: radial-gradient(circle at 50% 50%, #3b82f6 0%, #9333ea 100%)'>
  <!-- Inhalt -->
</div>

Komplexer Gradient für moderne UI

<div
  style='
    background: 
      radial-gradient(
        circle at 75% 180%,
        #fff9de -100%,
        #212a46 60%,
        #1a2339 100%
      );
    background-attachment: fixed;
  '
>
  <!-- Inhalt -->
</div>

2. Glassmorphism-Effekt

Der Glassmorphism-Effekt ist einer der beliebtesten Design-Trends. Er erzeugt eine durchscheinende, glasartige Oberfläche.

Grundlegende Glassy Card

<div class='
  bg-white/10 
  backdrop-blur-lg 
  rounded-xl 
  border border-white/20 
  p-6 
  shadow-xl
'>
  <h2 class='text-2xl font-bold text-white'>Glassy Card</h2>
  <p class='text-gray-300'>
    Diese Card hat einen schönen Glaseffekt!
  </p>
</div>

Erweiterte Glassy Card mit Hover-Effekt

<div class='
  bg-gray-800/50 
  backdrop-blur-md 
  rounded-lg 
  border border-gray-700 
  p-6 
  shadow-lg
  hover:bg-gray-800/70 
  hover:border-cyan-500/50
  transition-all 
  duration-300
'>
  <h2 class='text-2xl font-bold text-white'>Interaktive Card</h2>
  <p class='text-gray-300'>
    Diese Card reagiert auf Hover!
  </p>
</div>

3. Vollständiges Beispiel: Hero Section

Hier ist ein komplettes Beispiel für eine Hero-Section mit Gradient und Glassy Cards:

<template>
  <div
    class='min-h-screen pt-20'
    style='
      background: 
        radial-gradient(
          circle at 75% 180%,
          #fff9de -100%,
          #212a46 60%,
          #1a2339 100%
        );
      background-attachment: fixed;
    '
  >
    <div class='max-w-6xl mx-auto px-4 py-16'>
      <!-- Hero Text -->
      <div class='text-center mb-16'>
        <h1 class='text-5xl font-bold text-white mb-4'>
          Willkommen auf unserer Seite
        </h1>
        <p class='text-xl text-gray-300'>
          Entdecke moderne Design-Trends
        </p>
      </div>

      <!-- Glassy Cards Grid -->
      <div class='grid grid-cols-1 md:grid-cols-3 gap-6'>
        <!-- Card 1 -->
        <div class='
          bg-white/10 
          backdrop-blur-lg 
          rounded-xl 
          border border-white/20 
          p-6 
          shadow-xl
          hover:scale-105
          transition-transform
          duration-300
        '>
          <div class='text-cyan-400 text-4xl mb-4'>🚀</div>
          <h3 class='text-xl font-bold text-white mb-2'>
            Schnell
          </h3>
          <p class='text-gray-300'>
            Blitzschnelle Performance für deine Nutzer
          </p>
        </div>

        <!-- Card 2 -->
        <div class='
          bg-white/10 
          backdrop-blur-lg 
          rounded-xl 
          border border-white/20 
          p-6 
          shadow-xl
          hover:scale-105
          transition-transform
          duration-300
        '>
          <div class='text-cyan-400 text-4xl mb-4'>🎨</div>
          <h3 class='text-xl font-bold text-white mb-2'>
            Schön
          </h3>
          <p class='text-gray-300'>
            Moderne Designs, die begeistern
          </p>
        </div>

        <!-- Card 3 -->
        <div class='
          bg-white/10 
          backdrop-blur-lg 
          rounded-xl 
          border border-white/20 
          p-6 
          shadow-xl
          hover:scale-105
          transition-transform
          duration-300
        '>
          <div class='text-cyan-400 text-4xl mb-4'>🔒</div>
          <h3 class='text-xl font-bold text-white mb-2'>
            Sicher
          </h3>
          <p class='text-gray-300'>
            Höchste Sicherheitsstandards
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

4. Tailwind Config erweitern

Für wiederverwendbare Glassmorphism-Styles kannst du deine Tailwind-Config erweitern:

// tailwind.config.js
export default {
  theme: {
    extend: {
      backdropBlur: {
        xs: '2px',
      },
      backgroundColor: {
        'glass': 'rgba(255, 255, 255, 0.1)',
        'glass-dark': 'rgba(0, 0, 0, 0.2)',
      },
      borderColor: {
        'glass': 'rgba(255, 255, 255, 0.2)',
      },
    },
  },
  plugins: [],
}

Dann kannst du die benutzerdefinierten Klassen verwenden:

<div class='bg-glass backdrop-blur-lg border border-glass rounded-xl'>
  <!-- Glassy Card mit custom classes -->
</div>

5. Animierte Gradients

Für noch mehr Dynamik kannst du animierte Gradients hinzufügen:

<style>
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animated-gradient {
  background: linear-gradient(
    -45deg, 
    #ee7752, 
    #e73c7e, 
    #23a6d5, 
    #23d5ab
  );
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
</style>

<template>
  <div class='animated-gradient min-h-screen'>
    <!-- Inhalt mit animiertem Hintergrund -->
  </div>
</template>

Design-Tipps

Kontrast beachten

Stelle sicher, dass Text auf Glassy Cards gut lesbar ist. Verwende bei Bedarf dunklere Overlays oder stärkere Blurs.

Performance optimieren

Backdrop-Blur kann performance-intensiv sein. Nutze es sparsam und teste die Performance auf verschiedenen Geräten.

Subtilität ist der Schlüssel

Weniger ist oft mehr. Zu viele Effekte können überwältigend wirken. Halte das Design clean und fokussiert.

Browser-Kompatibilität prüfen

Backdrop-Blur wird nicht von allen älteren Browsern unterstützt. Biete Fallback-Styles an.

Fazit

Gradient-Hintergründe und Glassmorphism sind kraftvolle Design-Tools, die deiner Website ein modernes und elegantes Aussehen verleihen können. Mit Tailwind CSS und etwas custom CSS ist es einfach, diese Effekte zu implementieren. Experimentiere mit verschiedenen Farben, Blur-Werten und Transparenzen, um den perfekten Look für dein Projekt zu finden.