Inicio » Blog » HTML + CSS

8 febrero, 2024

Efecto Glassmorphism Mejora el diseño de tu página web

El efecto Glassmorphism es una tendencia de diseño que busca imitar la apariencia del vidrio translúcido. Se logra utilizando fondos semitransparentes, desenfoque y sombras para crear una sensación de profundidad y transparencia.

Suscríbete a nuestro canal en Youtube

Suscríbirse

El efecto Glassmorphism es una tendencia de diseño que busca imitar la apariencia del vidrio translúcido. Se logra utilizando fondos semitransparentes, desenfoque y sombras para crear una sensación de profundidad y transparencia. A continuación, te mostraré un ejemplo básico de cómo implementar el efecto Glassmorphism en HTML y CSS:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Efecto Glassmorphism en CSS</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #D9E3F0, #F0F0F0);
  }

  .card {
    width: 300px;
    height: 200px;
    background: rgba(255, 255, 255, 0.15); /* Fondo semitransparente */
    backdrop-filter: blur(10px); /* Desenfoque del fondo */
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde semitransparente */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Sombra */
    backdrop-filter: blur(15px);
    padding: 20px;
  }

  h1 {
    color: #fff;
    text-align: center;
  }

  p {
    color: #fff;
    text-align: center;
  }
</style>
</head>
<body>

<div class="card">
  <h1>Efecto Glassmorphism</h1>
  <p>Este es un ejemplo de Glassmorphism utilizando CSS.</p>
</div>

</body>
</html>

En este ejemplo, creamos una tarjeta (div con la clase .card) que representa el efecto Glassmorphism. Aquí hay algunas cosas clave a tener en cuenta:

  1. background: Utilizamos un color de fondo semitransparente (rgba(255, 255, 255, 0.15)) para simular la transparencia del vidrio.
  2. backdrop-filter: Aplicamos un filtro de desenfoque al fondo (blur(10px)) para dar una sensación de profundidad y translucidez.
  3. box-shadow: Agregamos una sombra (box-shadow) para realzar el efecto de profundidad.
  4. border: El borde también puede ser semitransparente para complementar el efecto.
  5. Dentro de la tarjeta, agregamos contenido (un título <h1> y un párrafo <p>) para demostrar cómo se puede aplicar el efecto en diferentes elementos.

Este es solo un ejemplo básico. Puedes ajustar los valores de los colores, desenfoque y sombras según tus preferencias para crear diferentes variaciones del efecto Glassmorphism.


Leido 592 veces

Compartir link del tutorial con tus amigos


HTML HTML

Curso de HTML Básico - Aprende a crear páginas web desde cero

Descarga del código fuente

USD 0.00

Aprende más sobre HTML + CSS

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023