Filtros de sombra paralela

Nos emociona anunciar la llegada de las sombras paralelas al panel de Estilo, dándote más control sobre la profundidad y dimensión de tus diseños sin necesidad de CSS personalizado.

Añade sombras paralelas fácilmente

Ahora puedes aplicar y personalizar sombras paralelas directamente desde el panel de Estilo > Efectos > Filtros. Esta función CSS te permite crear sombras que se ajustan a la forma de tus elementos, ideal para imágenes, formas complejas y más.

¿Por qué usar sombras paralelas? 

A diferencia de las sombras de caja, las sombras paralelas siguen el contorno exacto de tus elementos. Esto significa:

• Sombras perfectas para imágenes transparentes y logotipos
• Efectos de profundidad realistas para elementos con formas irregulares
• Un énfasis de aspecto más natural para tus componentes de diseño

Personaliza tus sombras paralelas

El nuevo filtro de sombra paralela incluye algunas propiedades que puedes controlar para que el efecto quede justo como quieres:

• Desplazamientos X e Y: controla la posición de la sombra
• Desenfoque: ajusta la suavidad de los bordes de la sombra
• Color: elige el color y la opacidad de la sombra con el selector de color

Ajusta según los puntos de interrupción 

Puedes ajustar la configuración de tus sombras paralelas en diferentes puntos de interrupción para asegurar que tu diseño se vea genial en todos los dispositivos.

Anima con variables 

Para animar una sombra paralela:

1. En el panel de Estilo, vincula variables a las propiedades del filtro: desplazamientos x e y, desenfoque y color.
2. En el panel de Interacciones, crea una nueva animación que incluya una acción de "Establecer valor de variable" y actualiza tus variables de sombra paralela según corresponda. ¡Esto crea una animación de sombra paralela dinámica y fluida!

Prueba las sombras paralelas hoy mismo

Nos emociona traer esta función tan solicitada al Diseñador de Webflow. Ya sea que quieras resaltar la imagen de un producto, darle profundidad a un botón o crear un efecto de elevación sutil en un texto, las sombras paralelas le dan un nuevo nivel de acabado a tus diseños.

¿Listo para darle profundidad a tu proyecto? ¡Ve al Diseñador de Webflow y empieza a experimentar con las sombras paralelas hoy mismo!