Generador de propiedades CSS

Un generador de propiedades CSS es una herramienta que crea código CSS para un efecto visual a partir de varios controles deslizantes y selectores de color, en lugar de que el usuario escriba el código manualmente. Este generador incluye cuatro efectos: degradados, sombras de caja, radios de borde y sombras de texto. Cada panel muestra una vista previa en tiempo real y produce CSS listo para copiar.

Qué genera

• Degradados: transiciones de color lineales o radiales entre dos colores
• Sombras de caja: una sombra proyectada o interior alrededor de un elemento, con controles para el desplazamiento, el desenfoque, la extensión, el color y la opacidad
• Radio de borde: esquinas redondeadas, iguales en las cuatro esquinas o configuradas individualmente
• Sombras de texto: una sombra detrás del texto, con controles para el desplazamiento, el desenfoque, el color y la opacidad

Cada configuración actualiza simultáneamente la vista previa y el CSS generado, por lo que los cambios pueden comprobarse antes de copiar el código.

Cómo calcular un degradado lineal CSS

Un degradado lineal pasa de un color a otro a lo largo de una línea recta. Su sintaxis CSS es:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

El ángulo se mide en grados, desde 0 hasta 360. position1 y position2 establecen dónde alcanza cada color su intensidad máxima, como porcentaje de la longitud del degradado.

Ejemplo práctico

Los valores iniciales del generador son un ángulo de 90 grados, #ff5f6d en 0 % y #ffc371 en 100 %. Esto produce:

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

La primera línea es un color alternativo simple para los navegadores que, por algún motivo, no logren representar el degradado. La segunda línea es el degradado propiamente dicho.

Fórmula del degradado radial

Un degradado radial se extiende hacia fuera desde un punto central, en lugar de hacerlo a lo largo de una línea:

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

Este generador siempre produce un degradado radial circular. No ofrece una opción de forma elíptica ni permite mover el punto central; solo se pueden cambiar los dos colores y las posiciones de sus puntos de transición.

Los dos tipos de degradado de esta herramienta utilizan exactamente dos colores, configurados con los selectores Color 1 y Color 2. No existe ninguna opción para añadir un tercer punto de transición de color.

Fórmula de la sombra de caja CSS

Una sombra de caja es una sombra dibujada alrededor de los bordes de un elemento:

1box-shadow: h-offset v-offset blur spread color;
2

h-offset y v-offset desplazan la sombra hacia la izquierda o la derecha y hacia arriba o abajo. Los valores positivos la desplazan hacia la derecha o hacia abajo; los negativos, hacia la izquierda o hacia arriba. blur suaviza el borde de la sombra; un número mayor extiende más el suavizado. spread aumenta o reduce el tamaño de la sombra antes de aplicar el desenfoque. Si se añade la palabra clave inset antes de los desplazamientos, la sombra se dibuja dentro del borde del elemento en lugar de fuera.

Ejemplo práctico

Con la configuración predeterminada (desplazamiento horizontal de 5px, desplazamiento vertical de 5px, desenfoque de 10px, extensión de 0px, negro con una opacidad de 20 %), la herramienta genera:

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

El control deslizante de opacidad del selector de color va de 0 a 100 y se convierte a la escala de 0 a 1 que utiliza rgba(), por lo que 20 % se convierte en 0,2.

Fórmula del radio de borde CSS

El radio de borde redondea las esquinas de un elemento. Existen dos formas:

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

Cuando las cuatro esquinas comparten un mismo valor, el generador escribe la forma abreviada. Cuando difieren, enumera los cuatro valores exactamente en este orden: superior izquierda, superior derecha, inferior derecha e inferior izquierda.

Ejemplo práctico

El radio predeterminado es de 10px en cada esquina:

1border-radius: 10px;
2

Una imagen de avatar circular suele utilizar border-radius: 50% en su lugar, aunque ese valor está fuera del intervalo que permite el control deslizante de este generador (de 0 a 100 píxeles).

Fórmula de la sombra de texto CSS

Una sombra de texto funciona como una sombra de caja, pero no tiene un valor de extensión y se aplica a las letras en lugar de a la caja de un elemento:

1text-shadow: h-offset v-offset blur color;
2

Ejemplo práctico

Con la configuración predeterminada (desplazamiento horizontal de 2px, desplazamiento vertical de 2px, desenfoque de 3px, negro con una opacidad de 50 %):

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

Qué códigos de color acepta el generador

Cada control de color tiene una muestra y un cuadro de texto. El cuadro de texto acepta un código de color hexadecimal, el formato # utilizado en todo CSS. Son válidas cuatro longitudes: tres dígitos (#f00), cuatro dígitos (#f00c), seis dígitos (#ff0000) y ocho dígitos (#ff0000cc). Las formas abreviadas representan el mismo color que las formas largas porque cada dígito se duplica: #123 representa el mismo color que #112233.

El último dígito de la forma de cuatro dígitos y el último par de la forma de ocho dígitos establecen la transparencia. Los generadores de sombras ignoran esos dígitos y toman el valor alfa del control deslizante Opacidad, de modo que el control siempre muestra la transparencia que se aplica realmente. Si el cuadro de texto contiene algo que no sea un color hexadecimal, como un código escrito solo parcialmente, la sombra vuelve al negro en lugar de producir una declaración incorrecta.

Cómo utilizar el generador de propiedades CSS

1. Elige una pestaña: Degradado, Sombra de caja, Radio de borde o Sombra de texto.
2. Ajusta los controles deslizantes, los selectores de color y las casillas de verificación. Cada control deslizante tiene al lado un cuadro numérico para introducir un valor exacto. El panel de vista previa y el código CSS se actualizan de inmediato.
3. Selecciona el botón «Copy to Clipboard» y pega el código en una hoja de estilos o en un atributo style.
4. Selecciona «Reset» para devolver todos los campos de las cuatro pestañas a sus valores iniciales. Esto también vuelve a activar la pestaña Degradado, aunque se estuviera viendo otra pestaña.

Preguntas frecuentes

¿Para qué se utiliza un generador de propiedades CSS? Convierte los valores introducidos mediante controles deslizantes y selectores de color en código CSS terminado para degradados, sombras y esquinas redondeadas, de modo que la persona que lo utiliza no tiene que escribir ni memorizar esa sintaxis manualmente.

¿Cuál es la diferencia entre un degradado lineal y uno radial? Un degradado lineal cambia de color a lo largo de una línea recta en un ángulo determinado. Un degradado radial cambia de color hacia fuera desde un punto central. La opción radial de esta herramienta siempre utiliza una forma circular.

¿Puede esta herramienta crear un degradado con más de dos colores? No. Los paneles de degradado lineal y radial admiten exactamente dos colores, Color 1 y Color 2, cada uno con su propia posición de transición.

¿En qué se diferencia una sombra de caja interior de una normal? Una sombra de caja normal se sitúa fuera de los bordes del elemento, como la luz que queda detrás de él. Una sombra interior se sitúa dentro de los bordes, lo que hace que el elemento parezca hundido en lugar de elevado.

¿Por qué los valores de las esquinas redondeadas aparecen en el orden superior izquierda, superior derecha, inferior derecha e inferior izquierda? Ese es el orden en que la propiedad CSS border-radius espera que se escriban cuatro valores separados, avanzando en el sentido de las agujas del reloj desde la esquina superior izquierda.

¿Funciona el CSS generado en todos los navegadores? Los degradados, las sombras de caja, los radios de borde y las sombras de texto son compatibles con las versiones actuales de Chrome, Firefox, Safari y Edge. La salida no incluye prefijos de proveedor.

Referencias

1. MDN Web Docs: Uso de degradados CSS
2. MDN Web Docs: box-shadow
3. MDN Web Docs: border-radius
4. MDN Web Docs: text-shadow