¿Qué es Gradient Border?

Esta es una herramienta para desarrolladores que facilita la creación de bordes multicolor en objetos HTML, generando el código para ser utilizado tanto con Tailwind como en CSS. Estos estilos pueden ser aplicados en elementos con fondos transparentes y esquinas redondeadas, logrando simular un borde común sin afectar el diseño general.

Cómo nació la idea

La idea surgió mientras trabajaba en mi portafolio de 2024. En ese entonces, quería tener bordes dinámicos con gradientes, que se fueran dibujando y cambiando de color al hacer scroll. Tras investigar un poco, logré hacer esto con un SVG y paths animados mediante Framer Motion. Pero, ¿qué hubiese pasado en el caso de tener bordes estáticos? ¿Era posible crear un gradiente directamente con la propiedad border de CSS? Me di cuenta que no había una opción nativa para lograr esto, y si bien existían muchos enfoques alternativos, en su mayoría se trataban de soluciones a medias o demasiado complicadas. Aunque no era un problema a resolver para mi portafolio (yo ya lo había solucionado con los paths), la complejidad del tema quedó rondando mi cabeza y, más adelante, me llevaría a crear Gradient Border.

• Generar dos contenedores, uno por encima del otro, el superior con el mismo color que el padre y el inferior con un background con el gradiente. Fondos transparentes, no admitidos:

• Utilizar la propiedad border-image. Muy bonito y de código simple, pero esto deshabilita el borde-radius:

• Hacer dos linear-gradients seguidos en un mismo elemento con la propiedad background. El primero es el gradiente y el segundo la simulación de un color plano que lo tapa. Pero esto es exactamente lo mismo que el primer caso, y los fondos transparentes quedan fuera de la ecuación:

• Hacer cosas complejísimas con códigos kilométricos. El resultado es efectivo, pero te debo la explicación de todo esto:

La mejor solución

Aunque puede parecer que estoy contándolo todo de forma secuencial como para dar redoblantes a la respuesta final, esta fue realmente mi experiencia al investigar sobre el tema. La gran mayoría de enfoques fallaban en cosas muy básicas o eran demasiado rebuscados. Por suerte, no tardé mucho en dar con una mejor solución gracias a un video del canal CodyHouse, que presentaba un código bastante elegante:

• Primero, se crea el contenedor con un borde transparente y esquinas redondeadas. Este contenedor tiene una posición relativa, lo que permite que luego un pseudo-elemento ::before se ubique de forma absoluta por detrás de él.

• El pseudo-elemento ::before replica la forma del padre, hereda sus propiedades y añade un gradiente multicolor. Con la propiedad mask, se restringe la visualización de este gradiente a únicamente los bordes, dejando el interior transparente. Esto no podría hacerse directamente en el primer contenedor, ya que la máscara haría invisible a cualquier elemento interno, y por eso recurrimos a este pseudo-elemento como si de un fondo se tratase.

Este fue el enfoque que más me convenció, y no tuve que seguir buscando mucho más. Lo que sí, al principio la aplicación iba a llamarse solamente “Gradient Border CSS”, sin el “Tailwind”, pero como esta era una librería que estaba en auge y que yo mismo estaba utilizando cada vez más, decidí no dejarla de lado y hacer su traducción. Cabe destacar que no todo pudo implementarse de forma directa por las limitaciones propias de Tailwind, y fue necesario recurrir al atributo style de los elementos HTML para aplicar las máscaras:

La app en sí

Una vez definido el enfoque, solo quedaba un pequeño detalle: construir una aplicación alrededor del mismo. Este fue un caso en el que no pude ser purista, ya que para el layout general quería usar Tailwind y Shadcn, pero para mostrar una vista preliminar de los resultados quería utilizar la solución de CSS en vez de mi traducción a Tailwind. Además, la librería Ant Design ofrecía un ColorPicker que no podía desaprovechar, y para mostrar el código resultante en un formato adecuado, necesité implementar CodeMirror. La verdad es que no veo un gran inconveniente en tener una ensalada de librerías UI como esta, siempre que cada cosa sea necesaria y que el resultado final mantenga una línea de diseño coherente.