CSS
HTML
COMPONENTS
CODE HUB
Generador de Desenfoque CSS
Configuración
Blur
Clase
Vista previa
Código
Learn to Code with Lara
Master programming concepts step-by-step with your interactive AI tutor. Lara explains complex logic, reviews your practice exercises, and helps you build a solid foundation in software development.
Interactive coding lessons tailored to your own pace.
Start learning with LaraGenerador de Desenfoque CSS
En CSS, el efecto de desenfoque se aplica típicamente a los elementos utilizando la propiedad filter. La propiedad filter permite aplicar varios efectos visuales a los elementos HTML, incluido el efecto de desenfoque, que hace que un elemento aparezca desenfocado o borroso. El efecto de desenfoque se usa a menudo para crear efectos visuales como superposiciones de vidrio esmerilado o enfoque suave.
En este ejemplo:
.blur-element {
filter: blur(5px);
}
La clase .blur-element aplica un efecto de desenfoque al elemento que tiene como objetivo.
- El valor blur(5px) especifica un radio de desenfoque de 5 píxeles. Puedes ajustar el valor en píxeles para controlar la intensidad del efecto de desenfoque.
- También puedes aplicar el efecto de desenfoque a elementos específicos, como imágenes, texto o imágenes de fondo, para crear diferentes efectos visuales en tu página web.
Ten en cuenta que el soporte para la propiedad filter puede variar entre navegadores, por lo que es esencial probar el efecto en diferentes navegadores para asegurar la compatibilidad. Además, los filtros CSS como el desenfoque pueden combinarse con otros filtros y efectos para lograr estilos visuales más complejos en tu sitio web.
Keep in mind that browser support for the filter property may vary, so it's essential to test the effect in different browsers to ensure compatibility. Additionally, CSS filters like blur can be combined with other filters and effects to achieve more complex visual styles on your website.