Docs ejecutables de CSS: Opacidad en CSS

Q: ¿Qué hace opacity en CSS?

Define qué tan transparente es un elemento, de 0 (totalmente transparente) a 1 (totalmente opaco). Se aplica a todo el elemento, incluidos su texto, su borde, sus imágenes y todos sus hijos, como una sola capa aplanada.

Q: ¿Cómo hago transparente solo el fondo y no el texto?

No toques opacity y dale al fondo un color con alfa: background-color: rgb(37 99 235 / 0.5); o rgba(37, 99, 235, 0.5). El texto y los hijos siguen totalmente opacos.

Q: ¿Qué diferencia hay entre opacity: 0, visibility: hidden y display: none?

opacity: 0 oculta el elemento, pero sigue ocupando espacio, se puede hacer clic en él y lo leen los lectores de pantalla. visibility: hidden conserva el espacio, pero no se puede hacer clic ni se lee. display: none lo quita del layout por completo.

Q: ¿La opacidad puede ser un porcentaje?

Sí. opacity: 50% es lo mismo que opacity: 0.5 en todos los navegadores actuales. Los valores menores que 0 o mayores que 1 se ajustan a ese rango.

Qué hace opacity

opacity define qué tan transparente es un elemento: 1 es sólido (el valor por defecto), 0 es invisible, y cualquier valor intermedio deja ver el fondo. Las cajas de abajo están sobre un fondo a rayas para que puedas verlo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Opacity</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .bg {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #ffffff 10px 20px);
    }
    .box { width: 90px; height: 70px; background: #2563eb; color: white; display: grid; place-items: center; font-weight: 700; }
  </style>
</head>
<body>
  <div class="bg">
    <div class="box" style="opacity: 1">1</div>
    <div class="box" style="opacity: 0.75">0.75</div>
    <div class="box" style="opacity: 0.5">0.5</div>
    <div class="box" style="opacity: 0.25">0.25</div>
    <div class="box" style="opacity: 0">0</div>
  </div>
</body>
</html>

La última caja sigue ahí: ocupa su hueco de 90px en la fila, solo que no dibuja nada. Fíjate en que los números blancos se desvanecen con sus cajas. opacity se aplica al elemento y a todo lo que contiene.

Fondo transparente, texto sólido

Como opacity también desvanece a los hijos, es la herramienta equivocada para "un fondo translúcido detrás de un texto legible". Usa un color de fondo con canal alfa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background alpha</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .bg { padding: 16px; background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #ffffff 10px 20px); }
    .card { padding: 14px; margin-bottom: 10px; color: #111827; font-weight: 700; }
    .with-opacity { background: #ffffff; opacity: 0.6; }
    .with-alpha { background: rgb(255 255 255 / 0.6); }
  </style>
</head>
<body>
  <div class="bg">
    <div class="card with-opacity" id="a">opacity: 0.6 (text fades too)</div>
    <div class="card with-alpha" id="b">background alpha 0.6 (text stays solid)</div>
  </div>
  <p id="out"></p>
  <script>
    const s = (id) => getComputedStyle(document.getElementById(id));
    document.getElementById('out').textContent =
      'first: opacity ' + s('a').opacity + '  |  second: opacity ' + s('b').opacity + ', background ' + s('b').backgroundColor;
  </script>
</body>
</html>

Los dos paneles blancos dejan ver las rayas en la misma medida. En el primero, el texto se desvanece junto con el panel. En el segundo solo es transparente el color de fondo (rgb(255 255 255 / 0.6), lo mismo que rgba(255, 255, 255, 0.6)), así que el texto sigue sólido y fácil de leer. Los colores con alfa se explican en la página de colores.

Un hijo no puede escapar de la opacidad de su padre: opacity: 1 en el hijo no hace nada, porque el padre se dibuja como una sola capa desvanecida con el hijo ya dentro.

Valores

Valor	Resultado
`1` o `100%`	totalmente opaco (por defecto)
`0.5` o `50%`	medio transparente
`0` o `0%`	totalmente transparente, sigue en el layout y se puede hacer clic
`1.5`, `-1`	se ajustan a `1` y `0`

La opacidad se hereda visualmente, pero no como propiedad: el opacity calculado de un hijo sigue siendo 1, mientras se dibuja dentro de un padre desvanecido.

opacity: 0 vs visibility: hidden vs display: none

Los tres hacen desaparecer un elemento, pero se diferencian en todo lo demás:

	`opacity: 0`	`visibility: hidden`	`display: none`
Ocupa espacio	sí	sí	no
Recibe clics y foco	sí	no	no
Lo leen los lectores de pantalla	sí	no	no
Se puede animar con transition	sí, con suavidad	cambia en un extremo, sin desvanecido	no

La diferencia que causa problemas es la segunda fila. Un botón con opacity: 0 todavía se puede clicar y alcanzar con Tab:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden but clickable</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 10px; }
    .row button { width: 150px; height: 40px; font: inherit; }
  </style>
</head>
<body>
  <div class="row">
    <button id="o" style="opacity: 0">opacity: 0</button>
    <button id="v" style="visibility: hidden">visibility: hidden</button>
    <button id="d" style="display: none">display: none</button>
    <button id="shown">Visible</button>
  </div>
  <p id="out"></p>
  <script>
    const hit = (id) => {
      const r = document.getElementById(id).getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 10, r.top + 10);
      return id + ': ' + (top && top.id === id ? 'clickable' : 'not clickable');
    };
    document.getElementById('out').textContent = [hit('o'), hit('v')].join('  |  ') +
      '  |  the Visible button starts at x = ' + document.getElementById('shown').offsetLeft + 'px';
  </script>
</body>
</html>

El indicador le pregunta al navegador qué elemento hay debajo de un punto dentro de cada botón oculto. El botón con opacity: 0 responde "clickable"; el de visibility: hidden no. El botón Visible empieza después de dos huecos vacíos de 150px, porque el botón con display: none es el único que devolvió su espacio. Para desvanecer algo y después quitarlo, anima opacity y pon visibility: hidden al final.

Desvanecer en hover

opacity es una de las propiedades más baratas de animar, así que es la forma estándar de hacer aparecer y desaparecer cosas. Un pie de foto que aparece sobre una imagen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover fade</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tile { position: relative; width: 240px; height: 150px; background: linear-gradient(135deg, #2563eb, #16a34a); }
    .caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10px;
      background: rgb(17 24 39 / 0.8);
      color: white;
      opacity: 0;
      transition: opacity 0.25s ease-out;
    }
    .tile:hover .caption, .tile:focus-within .caption { opacity: 1; }
  </style>
</head>
<body>
  <a class="tile" href="#" style="display: block">
    <span class="caption">Caption appears on hover and focus</span>
  </a>
</body>
</html>

:focus-within también muestra el pie de foto a los usuarios de teclado. Recuerda la tabla de arriba: mientras es invisible, los lectores de pantalla siguen leyendo el pie de foto, que es lo que quieres para un pie de foto.

Accesibilidad: el texto desvanecido pierde contraste

Bajar la opacidad baja el contraste. Un texto gris sobre blanco con opacity: 0.5 puede quedar muy por debajo de la relación 4.5:1 que necesita el texto del cuerpo. Para el texto secundario, elige un color que pase el contraste en lugar de desvanecer uno oscuro. En los controles deshabilitados, la opacidad reducida es una señal habitual, pero acompáñala del atributo disabled para que el control tampoco se pueda alcanzar con el teclado y se anuncie como deshabilitado.

Efecto secundario: contexto de apilamiento

Cualquier opacity menor que 1 crea un nuevo contexto de apilamiento, igual que transform. Los hijos con un z-index alto se apilan entonces solo dentro del elemento desvanecido y no pueden subir por encima de elementos que están fuera. Si un menú desplegable dentro de un panel desvanecido queda debajo de otro elemento, esta es la razón (la página de z-index explica el apilamiento).

Errores comunes

Desvanecer una tarjeta para que su fondo sea transparente. El texto también se desvanece. Usa rgb(... / 0.5) en el fondo.
Intentar que un hijo vuelva a ser opaco. La opacidad de un padre limita a todos sus hijos.
Ocultar solo con opacity: 0. El elemento sigue recibiendo clics y foco. Agrega visibility: hidden, o usa display: none (pointer-events: none detiene los clics, pero no el foco del teclado).
Escribir opacity: 50. La opacidad va de 0 a 1; 50 se ajusta a 1. Escribe 0.5 o 50%.
Texto de bajo contraste por la opacidad. Comprueba el contraste del resultado, no el del color original.

Preguntas frecuentes

¿Qué hace opacity en CSS?

Define qué tan transparente es un elemento, de 0 (totalmente transparente) a 1 (totalmente opaco). Se aplica a todo el elemento, incluidos su texto, su borde, sus imágenes y todos sus hijos, como una sola capa aplanada.

¿Cómo hago transparente solo el fondo y no el texto?

No toques opacity y dale al fondo un color con alfa: background-color: rgb(37 99 235 / 0.5); o rgba(37, 99, 235, 0.5). El texto y los hijos siguen totalmente opacos.

¿Un elemento hijo puede ser más opaco que su padre?

No. La opacidad de un padre se aplica a todo el grupo, así que opacity: 1 en un hijo no puede deshacerla. Un hijo de un padre con 0.5 se dibuja como mucho a la mitad de opacidad. Pasa la transparencia al color de fondo del padre.

¿Qué diferencia hay entre opacity: 0, visibility: hidden y display: none?

opacity: 0 oculta el elemento, pero sigue ocupando espacio, se puede hacer clic en él y lo leen los lectores de pantalla. visibility: hidden conserva el espacio, pero no se puede hacer clic ni se lee. display: none lo quita del layout por completo.

¿La opacidad puede ser un porcentaje?

Sí. opacity: 50% es lo mismo que opacity: 0.5 en todos los navegadores actuales. Los valores menores que 0 o mayores que 1 se ajustan a ese rango.

Conceptos relacionados