Cómo se usa
- Elige la pestaña Degradado o Botón.
- Ajusta los controles y observa la vista previa en vivo: colores, ángulo y tipo en un degradado; texto, colores, relleno y radio de las esquinas en un botón.
- Haz clic en el icono de copiar sobre el bloque de código y pega el CSS en tu hoja de estilos.
La pestaña Degradado crea un fondo a partir de dos colores. Puedes elegir entre un degradado lineal y uno radial. Para los degradados lineales hay un control deslizante de ángulo de 0 a 360 grados. La opción radial produce un degradado circular del primer color al segundo. El código bajo la vista previa es una única declaración background, por ejemplo un linear-gradient con un ángulo y dos paradas de color, lista para pegar.
La pestaña Botón genera una regla completa para una clase llamada custom-button. Estableces el texto de la etiqueta para la vista previa, el color de fondo, el color del texto, el relleno horizontal y vertical (de 0 a 100 px cada uno) y el radio de las esquinas (de 0 a 50 px). El CSS generado incluye los colores, el relleno y el radio que elijas, además de sin borde, cursor de puntero, grosor de fuente medio, una transición breve de opacidad y una regla de hover que baja ligeramente la opacidad.
Los colores se pueden elegir con el control de color o escribirse como texto. La salida es CSS puro, sin prefijos de proveedor y sin framework, así que puedes usarla en cualquier proyecto y seguir editándola. Esta herramienta no admite degradados con más de dos paradas de color.
No se envía nada a ningún servidor. La vista previa y el código se generan en tu navegador mientras escribes.
Preguntas frecuentes
¿Puedo hacer un degradado con tres o más colores?
No. Esta herramienta usa dos colores. Puedes añadir más paradas editando el CSS copiado.
¿Qué hace el control de ángulo?
En los degradados lineales establece la dirección en grados. Se oculta en los degradados radiales, que siempre son circulares.
¿Cuál es el nombre de clase en el CSS del botón?
La regla generada usa la clase custom-button, que puedes renombrar para adaptarla a tu proyecto.
¿Añade un estilo hover al botón?
Sí. El CSS copiado incluye una regla hover que establece la opacidad en 0.9.
¿Se sube algo de lo que introduzco?
No. El CSS se crea en tu navegador.