Cargando...

Opacidad CSS

Ya sabes sólidos, fotos y degradados. A veces quieres que todo el elemento se vea más suave — una capa apagada, un botón desactivado, una tarjeta que se retire. Esa es la tarea de opacity: qué tan sólido o transparente se ve toda la caja.

¿Qué hace opacity?

La propiedad opacity fija qué tan opaco es un elemento. El valor va de 1 (totalmente sólido, lo habitual) a 0 (totalmente invisible). Decimales como 0.5 quedan en medio. Importante: la opacidad se aplica al elemento y a todo lo de dentro — texto, bordes, fondos y cajas hijas se atenúan juntos.

Opacity frente al alfa del color

Es fácil mezclar estas dos ideas. Manténlas aparte.

📊 Opacity frente al alfa del color

Herramienta Qué se atenúa Uso típico
opacity Todo el elemento (y sus hijos) Capas suaves, aspecto desactivado, fade más adelante
Alfa rgba() / hsla() Solo esa capa de color Fondos transparentes con texto sólido encima
Palabra transparent Un valor de color totalmente claro Ocultar color de borde sin quitar la propiedad
visibility: hidden Oculta a la vista pero mantiene el layout Otra herramienta — aquí no profundizamos

Totalmente sólido y medio atenuado

Empieza comparando 1 y 0.5 en el mismo diseño de tarjeta.

Sólido frente a media opacidad

css
CSS Code 
.card-solid {
opacity: 1;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

.card-soft {
opacity: 0.5;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

Qué debes notar

En .card-soft, el fondo y el texto se ven lavados. Opacity no perdona las letras.

Los hijos se atenúan con el padre

Si un padre tiene opacity: 0.4, los títulos y botones anidados no pueden «salirse» poniendo su propio opacity: 1. Ya se pintan dentro de una capa atenuada.

La opacity del padre lava a los hijos

css
CSS Code 
.overlay {
opacity: 0.4;
background-color: #0f172a;
color: white;
padding: 1rem;
}

.overlay strong {
opacity: 1; /* no restaura fuerza total dentro de un padre atenuado */
}

Implicación de diseño

¿Panel esmerilado con texto nítido? Atenúa el color de fondo con rgba, no todo el elemento con opacity.

Prefiere rgba cuando solo el relleno debe suavizarse

Aquí el fondo del panel es translúcido, pero el texto permanece a plena fuerza.

Relleno suave, texto sólido

css
CSS Code 
.panel {
background-color: rgba(15, 118, 110, 0.25);
color: #042f2e; /* texto a plena fuerza */
padding: 1rem;
}

Hábito de UI atenuada

Patrón habitual: bajar un poco la opacity en acciones secundarias o controles desactivados para que se sientan más quietos — manteniendo contraste legible.

Botón secundario atenuado

css
CSS Code 
.btn-secondary {
opacity: 0.75;
background-color: #e2e8f0;
color: #0f172a;
border: none;
padding: 0.5rem 1rem;
}

Cero es invisible — el espacio puede quedar

opacity: 0 hace invisible el elemento, pero aún puede ocupar espacio de layout y, según el contexto, recibir eventos de puntero. Si debe salir del layout, eso es otra herramienta (display: none), no solo opacity.

Invisible pero aún en el flujo

css
CSS Code 
.ghost {
opacity: 0;
}

Pruébalo tú

  1. Dos tarjetas con los mismos colores; una opacity: 1 y otra opacity: 0.5.
  2. Una línea en negrita dentro de un padre con opacity: 0.4 — confirma que no «desatenúas» del todo al hijo.
  3. Rehaz el look suave con background-color: rgba(…, 0.25) y color sólido.
  4. Botón secundario a opacity: 0.75 y comprueba la lectura.
  5. Opcional: opacity: 0 en una caja y observa el hueco que deja en el layout.

Errores frecuentes

  • Poner opacity en el padre cuando solo querías fondo transparente
  • Esperar que un hijo con opacity: 1 se vea sólido dentro de un padre atenuado
  • Usar opacity: 0 como sustituto de quitar espacio de layout
  • Bajar tanto la opacity que el texto falle el contraste
  • Confundir la palabra transparent con la propiedad opacity

Resumen

  • opacity fija qué tan transparente es todo el elemento (0–1)
  • Los hijos se atenúan con el padre — no se escapan del todo desde dentro
  • Para fondos suaves con texto sólido, prefiere alfa rgba / hsla
  • Baja opacity puede silenciar la UI; piensa en accesibilidad
  • Invisible (0) no es lo mismo que fuera del layout
  • Practica el par de tarjetas y la reconstrucción con rgba hasta que la diferencia sea obvia

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 1
Css Tutorial