Creando un efecto salpicado en HTML y CSS (con Video)
Tags: html, css, webdev, spanish
Published: 2022-10-21 18:55:37

---
title: Creando un efecto salpicado en HTML y CSS (con Video)
published: true
description: Aprende cómo dibujar un efecto de salpicadura con un elemento HTML y filtros CSS.
tags: html,css,webdev,spanish
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/583dq7eoeqhmihv1l59p.png
canonical_url: https://alvaromontoro.com/blog/68018/creating-a-splash-effect-with-html-and-css#
---

La palabra del día en [divtober](https://a.singlediv.com/divtober2022/) es "splash" (que podría traducirse como "salpicadura" en español.) En este artículo voy a mostrar cómo crear un efecto de salpicadura utilizando un solo elemento HTML y unas pocas líneas de CSS. **Hay un video con la explicación del proceso al final del artículo**, si prefieres algo más audiovisual.


Empezamos creando la etiqueta HTML. Normalmente opto por un `<article>` para hacer dibujos en CSS, pero esto va a ser algo más decorativo, así que lo voy a dejar como un simple `<div>` (aunque funcionará con cualquier elemento de tipo bloque):

```html
<div class="splash"></div>
```

Tenemos que preparar un poco el elemento, especificar el ancho, alto o si el borde va a ser redondeado o no. La forma y tamaño que elijamos determinará cómo se acabará viendo la salpicadura.

```scss
.splash {
  width: 500px;
  height: 500px;
}
```

Vamos a crear el efecto de salpicado utilizando gradientes cónicos repetitivos y después aplicando un par de filtros CSS. En particular:

- `blur()`: para añadir un efecto de desenfoque Gaussiano, que hará que los colores se vean borrosos y se mezclen un poco entre ellos.
- `contrast()`: para ajustar el contraste de los fondos desenfocados, mezclándolos más aún y dándole un acabado más nítido.

El resultado va a variar considerablemente dependiendo en los valores: un valor más alto en el `blur` hará que sea una mancha más indeterminada, y un valor más alto de contraste enfocará y marcará más los bordes.

Vamos a empezar sólo con un gradiente cónico:

```scss
.splash {
  width: 500px;
  height: 500px;
  background: repeating-conic-gradient(#00f 0 3%, #0000 0 11%) #fff;
  filter: blur(20px) contrast(20);
}
```

Con este código, la salpicadura se ve así:

![líneas azules sobre un fondo blanco, los extremos se ven borrosos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4r0n9lc96s1d4oymhkjr.png)

Los bordes se ven mal porque nuestro fondo es blanco y azul y el filtro lo desenfoca de manera "extraña" con la transparencia que envuelve al elemento. ¿Una solución? Añadir una pequeña sombra alrededor del elemento:

```scss
.splash {
  width: 500px;
  height: 500px;
  background: repeating-conic-gradient(#00f 0 3%, #0000 0 11%) #fff;
  filter: blur(20px) contrast(20);
  box-shadow: 0 0 0 50px #fff;
}
```

Con este pequeño cambio, la salpicadura ya parece una salpicadura:

![Gotas azules extendiéndose en todas las direcciones desde un punto central](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmo3tydliy2aqdetflmc.png)

Este efecto queda genial con texto o una imagen en el centro, pero lo vamos a llevar un paso más allá. Añadiendo más gradientes cónicos (y algún que otro gradiente radial), podemos generar un tipo diferente de salpicadura:

```scss
.splash {
  width: 500px;
  height: 500px;
  background:
    repeating-conic-gradient(#00f 0 3%, #0000 0 11%),
    repeating-conic-gradient(#0000 0 5%, #00f 0 7%) 50% / 60% 60%,
    repeating-conic-gradient(#0000 0 7%, #00f 0 9%) 50% / 70% 70%,
    repeating-conic-gradient(#0000 0 11%, #00f 0 13%) 50% / 80% 80%,
    radial-gradient(#00f 22%, #0000 0),
    #fff;
  background-repeat: no-repeat;
  filter: blur(20px) contrast(50);
  box-shadow: 0 0 0 50px #fff;
}
```

![Salpicadura azul sobre un fondo blanco](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0j94kaa5foq0z6w1nc3e.png)

Hay un par de cosas en este código que merecen una mención aparte:

- Añadí `background-repeat: no-repeat` para evitar que los gradientes más pequeños se repitieran y ocuparan todo el elemento. Los puedes eliminar para que se vea diferente.

- Me gusta usar números primos para los gradientes repetitivos porque así hay menos colisiones y es más difícil detectar el patrón que siguen. Puedes optar por algo más "predecible."

¡Eso es todo! Juega con los tamaños, los gradientes y sus paradas, o cambia los filtros y obtendrás una salpicadura completamente diferente. También puedes añadir más filtros para cambiar los colores y conseguir nuevos resultados. ¡Muestra tu lado creativo y pásatelo bien! Y si acabas creando una demo para divtober (o cualquier otro proyecto) basada en este tutorial, compártela en los comentarios o en [Twitter](https://twitter.com/alvaro_montoro). Me encanta ver las cosas que crea la gente.

---

{% youtube W21mR3BylY8 %}