Crea hermosos degradados de texto CSS sin esfuerzo

Crea impresionantes efectos de texto degradado para tu sitio web

Controles

CSS Texto de degradado Tipo
.gradient-text { background: linear-gradient(to right, #4F46E5, #EC4899); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

Degradados populares

Sunset
linear-gradient(to right, #FF512F, #F09819)
Magic
linear-gradient(to right, #4158D0, #C850C0, #FFCC70)
Ocean
linear-gradient(to right, #0093E9, #80D0C7)
Electric
linear-gradient(to right, #30CFD0, #330867)
Ensalada
linear-gradient(to right, #FA709A, #FEE140)
Neon Glow
linear-gradient(to right, #00DBDE, #FC00FF)

Cómo usar

1

Ingrese su texto

Escriba el texto al que desea aplicar el degradado en el " Campo de entrada "Texto".

2

Seleccione

entre los tipos de degradado Lineal, Radial o Cónico.

3

Ajustar dirección o ángulo

Para degradados lineales, elija una dirección. Para degradados cónicos, defina el ángulo.

4

Personaliza los colores

Añade, elimina o ajusta las paradas de color y sus posiciones para crear el degradado que desees.

5

Copiar o guardar CSS

Copie el código CSS generado o guárdelo como un archivo CSS para usarlo en sus proyectos.

Acerca de los degradados de texto Los

degradados de texto CSS te permiten aplicar hermosos degradados multicolores directamente al texto. Este efecto antes solo era posible con imágenes, pero el CSS moderno lo hace simple y eficiente.

Compatibilidad con navegadores:Los degradados de texto son compatibles con todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge. Para los navegadores más antiguos, como Internet Explorer, el texto volverá a un color sólido.

Consejos de uso:Los degradados de texto funcionan mejor con texto en negrita y combinaciones de colores de alto contraste. Experimente con diferentes tipos de degradado y direcciones para lograr el efecto deseado.

Related Tools