opacity

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.

Steckbrief opacity

Syntax: opacity: <number>
Initialwert: 1
Vererbt: Nein
Animierbar: Ja

Kategorie: Display & Sichtbarkeit
Werte: 4
Beispiele: 4
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

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

4 Werte

Wert	Beschreibung	Beispiel
`1`	Element ist vollständig sichtbar. (Standard)	opacity: 1
`0.5`	Element ist halbtransparent. Der Hintergrund scheint durch.	opacity: 0.5
`0`	Element ist komplett unsichtbar, nimmt aber weiterhin Platz ein und reagiert auf Events.	opacity: 0
`<number>`	Jeder Wert zwischen 0 und 1 ist möglich. Werte außerhalb werden auf den nächsten gültigen Wert begrenzt.	opacity: 0.75

Beispiele

4 Beispiele

Opacity-Stufen von 1 bis 0

.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>

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

Hover-Effekt mit opacity

.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>

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

Disabled-State

.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 macht das gesamte Element transparent, inklusive Text. Mit rgba() oder hsla() kannst du nur den Hintergrund transparent machen und den Text voll lesbar lassen.

opacity vs. rgba()

/* 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

5 Fehler

01 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.

02 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.

03 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.

04 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.

05 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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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

Apple Mail

Komplett
Gmail

Teilweise

opacity wird unterstützt, aber Transitions funktionieren nicht
Outlook

Keine

Outlook ignoriert opacity komplett. Verwende rgba() für transparente Hintergründe
Thunderbird

Komplett
Yahoo Mail

Teilweise

Grundlegende opacity-Werte werden unterstützt

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da