opacity

Zuletzt aktualisiert am 15. Februar 2026

opacity bestimmt die Transparenz eines Elements auf einer Skala von 0 (komplett durchsichtig) bis 1 (komplett sichtbar). Das Besondere an opacity: Die Eigenschaft betrifft das gesamte Element inklusive aller Kinder, Text und Hintergründe. Wenn du nur den Hintergrund transparent machen willst, ist rgba() oder hsla() die bessere Wahl. Zusammen mit transition lassen sich sanfte Hover-Effekte und Einblend-Animationen umsetzen.

Grundlagen

opacity wirkt auf das gesamte Element als Einheit. Du kannst nicht nur den Hintergrund halbtransparent machen und den Text voll sichtbar lassen. Das ist ein bewusstes Design: opacity behandelt das Element wie eine flache Grafik und passt die Gesamtdeckkraft an.

Ein wichtiger Nebeneffekt: Jeder opacity-Wert kleiner als 1 erzeugt einen neuen Stacking Context. Das beeinflusst die Reihenfolge, in der Elemente übereinander gerendert werden, ähnlich wie z-index mit position. Das kann unerwartete Auswirkungen auf die Darstellungsreihenfolge haben.

Anders als visibility: hidden oder display: none bleibt ein Element mit opacity: 0 voll interaktiv. Es reagiert weiterhin auf Klicks, Hover und Tastatur-Events. Deswegen kombiniert man opacity: 0 oft mit visibility: hidden oder pointer-events: none.

Syntax & Werte

Beispiele

Opacity-Stufen im Überblick

.box-100 { opacity: 1; }     /* Voll sichtbar */
.box-75  { opacity: 0.75; }  /* Leicht transparent */
.box-50  { opacity: 0.5; }   /* Halbtransparent */
.box-25  { opacity: 0.25; }  /* Stark transparent */
.box-0   { opacity: 0; }     /* Unsichtbar */

<div class="opacity-demo">
<div class="opacity-box op-100">1.0</div>
<div class="opacity-box op-75">0.75</div>
<div class="opacity-box op-50">0.5</div>
<div class="opacity-box op-25">0.25</div>
<div class="opacity-box op-0">0</div>
</div>

Hover-Effekt mit Transition

Ein klassischer Effekt: Elemente sind leicht transparent und werden beim Hover voll sichtbar.

.card {
  opacity: 0.6;
  transition: opacity 0.3s;
  cursor: pointer;
}

.card:hover {
  opacity: 1;
}

<div class="card-grid">
<div class="hover-card"><strong>Karte 1</strong><br>Hover mich</div>
<div class="hover-card"><strong>Karte 2</strong><br>Hover mich</div>
<div class="hover-card"><strong>Karte 3</strong><br>Hover mich</div>
</div>

Disabled-State mit Opacity

Ein bewährtes Muster: Deaktivierte Elemente visuell abschwächen.

.button {
  background: #1a56db;
  color: white;
  padding: 10px 20px;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

<div class="btn-demo">
<button class="demo-btn">Aktiver Button</button>
<button class="demo-btn-disabled" disabled>Deaktiviert</button>
</div>

Opacity vs. rgba: der Unterschied

opacity macht das gesamte Element transparent, inklusive Text. Mit rgba() oder hsla() kannst du nur den Hintergrund transparent machen und den Text voll lesbar lassen.

/* Gesamtes Element transparent */
.with-opacity {
  background: #1a56db;
  color: white;
  opacity: 0.4;
  /* Text ist auch transparent! */
}

/* Nur Hintergrund transparent */
.with-rgba {
  background: rgba(26, 86, 219, 0.4);
  color: #1e293b;
  /* Text bleibt voll lesbar */
}

<div class="compare-row">
<div class="compare-box with-opacity">
  <strong>opacity: 0.4</strong><br>
  Alles ist transparent, auch der Text
</div>
<div class="compare-box with-rgba">
  <strong>rgba(26, 86, 219, 0.4)</strong><br>
  Nur der Hintergrund ist transparent
</div>
</div>

Barrierefreiheit

opacity: 0 versteckt Elemente visuell, lässt sie aber voll interaktiv. Das bedeutet: Tastatur-Nutzer können mit Tab auf unsichtbare Buttons oder Links fokussieren, Screenreader lesen den Inhalt vor, und Maus-Nutzer können versehentlich auf transparente Flächen klicken. Das kann zu erheblicher Verwirrung führen.

Kombiniere opacity: 0 immer mit visibility: hidden oder pointer-events: none, um Events zu blockieren:

.hidden {
  opacity: 0;
  visibility: hidden; /* Entfernt aus Tab-Order */
  pointer-events: none; /* Blockiert Klicks */
}

Animationen und prefers-reduced-motion: Nutzer mit vestibulären Störungen oder Epilepsie können durch animierte Transparenz-Wechsel beeinträchtigt werden. Respektiere die System-Einstellung:

.fade {
  transition: opacity 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}

Kontrast bei halbtransparenten Elementen: Wenn du Text oder interaktive Elemente mit opacity abdimmst, achte darauf, dass der Kontrast weiterhin den WCAG 2.1 Anforderungen entspricht (WCAG 1.4.3: Kontrast von mindestens 4.5:1 für normalen Text). Ein Element mit opacity: 0.5 über einem hellen Hintergrund kann schnell unleserlich werden.

Häufige Fehler

• Text wird unlesbar durch opacity: opacity betrifft das gesamte Element inklusive Text und Rahmen. Wenn du nur den Hintergrund transparent machen willst, verwende rgba() oder hsla() für die Hintergrundfarbe.
• opacity: 0 blockiert nicht Klicks: Ein Element mit opacity: 0 ist unsichtbar, aber voll interaktiv. Es empfängt weiterhin Klick- und Hover-Events. Kombiniere es mit visibility: hidden oder pointer-events: none.
• Unerwarteter Stacking Context: opacity kleiner als 1 erzeugt einen neuen Stacking Context. Das kann dazu führen, dass z-index anders funktioniert als erwartet. Ein Element mit opacity: 0.99 stapelt sich anders als eines mit opacity: 1.
• opacity auf Elternelement setzen und Kind soll voll sichtbar bleiben: Anders als bei visibility kann ein Kind die opacity des Elternelements nicht überschreiben. Wenn das Elternelement opacity: 0.5 hat, ist alles darin maximal 50% sichtbar.
• opacity: 0 als Ersatz für display: none: opacity: 0 entfernt das Element nicht aus dem Layout. Es nimmt weiterhin Platz ein und beeinflusst den Dokumentenfluss.

Browser-Kompatibilität

opacity wird von allen modernen Browsern vollständig unterstützt, inklusive Transitions und Animationen.

Email-Kompatibilität

opacity wird in HTML-Emails nur teilweise unterstützt.

Verwandte Eigenschaften