Utilidades · Transparencia

Opacity (presencia visual)

Controla la transparencia del elemento completo en once niveles, aplícala sólo durante hover o incorpora una transición de opacidad preconfigurada.

v2.0

Once niveles

La escala avanza de 0% a 100% visible mediante incrementos constantes de diez puntos.

Tres familias

Valor fijo, preset con transición y cambio exclusivo durante :hover.

Una capa

La propiedad se calcula sobre el elemento completo, incluidos contenido, bordes y descendientes.

Código + resultado

Compara las tres formas de aplicarla

El HTML mostrado es el mismo que produce cada resultado aplicado.

<article class="opacity-50">
  Contenido al 50%
</article>

ContenidoTexto, fondo y borde

.opacity-50 aplica opacity: 0.5 permanentemente a la caja completa.

<article>
  <div class="opacity-trans-100 opacity-hover-40">
    Superficie
  </div>
  <p>Texto siempre opaco</p>
</article>

Superficie

Texto siempre opacoPasa el cursor sobre el recuadro

Las clases se aplican únicamente a la superficie: transiciona de 100% a 40%, mientras el texto hermano permanece completamente opaco.

<article>
  <div class="opacity-trans-40 opacity-hover-100">
    Superficie
  </div>
  <p>Texto siempre opaco</p>
</article>

Superficie

Texto siempre opacoPasa el cursor sobre el recuadro

.opacity-trans-40 inicia la superficie al 40% y prepara la transición; .opacity-hover-100 la lleva al 100% sin modificar el texto.

Escala

De invisible a completamente opaco

El número representa el porcentaje visible. El valor CSS equivalente va de 0 a 1.

.opacity-00% visible

.opacity-1010% visible

.opacity-2020% visible

.opacity-3030% visible

.opacity-4040% visible

.opacity-5050% visible

.opacity-6060% visible

.opacity-7070% visible

.opacity-8080% visible

.opacity-9090% visible

.opacity-100100% visible

Mapa del sistema

Una escala, tres momentos de aplicación

Las tres familias comparten los valores 0, 10, 20…100, pero difieren en cuándo aplican la opacidad y si agregan movimiento.

BASE.opacity-{valor}

Estado permanente

Aplica el nivel inmediatamente y lo mantiene mientras la clase permanezca en el elemento.

opacity: valor

PRESET.opacity-trans-{valor}

Valor con transición

Aplica el nivel y prepara cualquier cambio posterior de opacidad durante 250ms con easing suave.

opacity + transition

ESTADO.opacity-hover-{valor}

Sólo al pasar el cursor

No cambia el estado normal; aplica el nivel únicamente mientras el elemento coincide con :hover.

:hover { opacity }

Sin variantes responsiveEste módulo no define clases con breakpoint. No uses nombres como .opacity-768-50: actualmente no existen en el framework.

Alcance real

Qué cambia y qué permanece

Comprender el comportamiento de la propiedad evita usar opacidad como reemplazo de display, visibility o colores transparentes.

◫

Afecta toda la caja

Fondo, borde, texto, imágenes y descendientes se componen juntos con el mismo nivel.

↔

Conserva el espacio

La caja sigue participando normalmente en el layout incluso cuando utiliza .opacity-0.

⌁

Conserva interacción

Un elemento transparente puede seguir recibiendo clics y foco si no desactivas esas capacidades.

Reduce contraste

En textos y controles, comprueba que el resultado conserve contraste suficiente sobre el fondo real.

Referencia

Clases disponibles

La tabla distingue el valor visible de la familia que decide cuándo se aplica.

Clases	Propiedad	Función	Uso
`.opacity-0`	`opacity: 0`	Mantiene el elemento al 0% visible.	Estado base permanente.
`.opacity-10`	`opacity: 0.1`	Mantiene el elemento al 10% visible.	Estado base permanente.
`.opacity-20`	`opacity: 0.2`	Mantiene el elemento al 20% visible.	Estado base permanente.
`.opacity-30`	`opacity: 0.3`	Mantiene el elemento al 30% visible.	Estado base permanente.
`.opacity-40`	`opacity: 0.4`	Mantiene el elemento al 40% visible.	Estado base permanente.
`.opacity-50`	`opacity: 0.5`	Mantiene el elemento al 50% visible.	Estado base permanente.
`.opacity-60`	`opacity: 0.6`	Mantiene el elemento al 60% visible.	Estado base permanente.
`.opacity-70`	`opacity: 0.7`	Mantiene el elemento al 70% visible.	Estado base permanente.
`.opacity-80`	`opacity: 0.8`	Mantiene el elemento al 80% visible.	Estado base permanente.
`.opacity-90`	`opacity: 0.9`	Mantiene el elemento al 90% visible.	Estado base permanente.
`.opacity-100`	`opacity: 1`	Mantiene el elemento al 100% visible.	Estado base permanente.
`.opacity-trans-{0…100}`	`opacity + transition`	Aplica el nivel indicado y anima los cambios de opacidad durante 250ms.	`.opacity-trans-80`
`.opacity-hover-{0…100}`	`opacity` en `:hover`	Aplica el nivel indicado solamente mientras el puntero está encima.	`.opacity-hover-60`

Recomendaciones

Buenas prácticas de opacity

No ocultes interacción

Si utilizas .opacity-0, controla también foco y eventos cuando el elemento no deba operar.

Cuida el contraste

Evita valores bajos en contenido esencial, etiquetas de formularios y acciones principales.

Prefiere composición

Combina un estado base y hover cuando necesites definir claramente ambos extremos del cambio.

No anides opacidades

Dos ancestros semitransparentes multiplican el efecto y pueden volver impredecible el resultado.