Generador de borde degradado (CSS)
Elige los colores, el grosor y las esquinas. El código usa dos capas de fondo, la forma que mantiene funcionando el border-radius.
Cómo usarBorde de color en degradado
Disponible en: 
Generador de borde degradado (CSS): para qué sirve
La forma obvia de hacer un borde con degradado, border-image, ignora las esquinas redondeadas. Este generador usa la técnica de dos capas de fondo (padding-box y border-box), que mantiene el border-radius, o una máscara con mask-composite cuando la tarjeta necesita fondo transparente.
Elige dos o tres colores, el ángulo, el grosor y las esquinas, y opcionalmente el borde giratorio, hecho con conic-gradient y una variable de ángulo registrada con @property, desactivado para quien prefiere menos movimiento.
Cómo usar
- Elige los colores y el ángulo.
- Ajusta el grosor, las esquinas y el fondo.
- Copia el CSS y aplica la clase.
Cuándo usar
- Tarjeta de plan destacado.
- Foto de perfil con borde de color.
- Botón de llamada principal.
Preguntas frecuentes
¿Por qué no usar border-image?
Con border-image el degradado funciona, pero las esquinas redondeadas (border-radius) se ignoran. La técnica de este generador pinta el degradado como una segunda capa de fondo que aparece solo en el área del borde, y así las esquinas quedan redondas.
¿Y si el fondo de la tarjeta es transparente?
Marca la opción de fondo transparente: el código pasa a usar una máscara (mask) para recortar el centro, y lo que esté detrás de la tarjeta se ve por dentro del borde.
¿Cómo funciona el borde giratorio?
El degradado es cónico y el ángulo es una variable registrada con @property, que CSS puede animar. Para quien prefiere menos movimiento, la animación queda desactivada.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.