CSS Generator Suite — Degradados y Formas

¿Qué es la CSS Generator Suite?

La CSS Generator Suite es una caja de herramientas basada en navegador que produce CSS y output Tailwind listo para pegar para quince tareas de estilo comunes, todo desde una única interfaz con pestañas. En lugar de escribir box shadows, declaraciones flexbox o reglas de glassmorphism a mano y actualizar el navegador para comprobar el resultado, ajusta controles deslizantes y menús desplegables mientras una vista previa en vivo se actualiza instantáneamente. El resultado se renderiza directamente debajo de cada panel de control — un clic lo copia al portapapeles. Cada cálculo se ejecuta completamente en su navegador. No se cargan archivos, no se requiere cuenta y la herramienta funciona sin conexión una vez que la página se ha cargado.

Los usuarios típicos incluyen desarrolladores frontend que quieren crear prototipos de pilas de sombras rápidamente, diseñadores que necesitan exportar valores cubic-bezier para especificaciones de movimiento, y estudiantes que quieren entender cómo se componen las propiedades CSS observando cómo cambia la vista previa en tiempo real.

Características Principales

• Box Shadow Generator con capas — Añada múltiples capas de sombra independientes, cada una con su propio offset-X (−50 a 50 px), offset-Y (−50 a 50 px), blur (0–100 px), spread (−50 a 50 px), selector de color e interruptor inset. La declaración box-shadow generada combina todas las capas en un único valor separado por comas.
• Flexbox Layout Builder — Elija flex-direction (row, row-reverse, column, column-reverse), justify-content (seis valores incluyendo space-evenly), align-items (cinco valores), flex-wrap y gap (0–48 px en pasos de 4). Cuatro cajas de marcador de posición numeradas demuestran el diseño en vivo.
• CSS Grid Template Generator — Edite grid-template-columns y grid-template-rows como cadenas de texto libre con presets de un clic (repeat(4, 1fr), 200px 1fr, etc.), controle gap, align-items, justify-items y previsualice hasta dieciséis celdas de cuadrícula numeradas.
• Unit Converter (px / rem / em / %) — Ingrese un valor en cualquier unidad y vea los cuatro equivalentes recalculados instantáneamente contra un tamaño de fuente base configurable (predeterminado 16 px). Haga clic en cualquier tarjeta de resultado para copiar ese valor con su unidad añadida.
• Cubic Bezier / Easing Generator — Cuatro controles deslizantes controlan P1X, P1Y, P2X, P2Y. Un canvas renderiza la curva bezier con manejadores de punto de control. Diez presets con nombre (ease, ease-in-back, ease-out-cubic, etc.) se aplican con un solo clic. Una vista previa de movimiento anima un bloque a través de una pista usando la curva actual.
• Clip Path Generator — Soporta formas circle, ellipse, inset y polygon. El editor de polígonos incluye seis presets (triangle, diamond, pentagon, hexagon, star, arrow).
• Border Radius Generator — Modo vinculado o por esquina, sintaxis opcional de 8 valores para radios asimétricos y seis presets de forma (Rounded, Pill, Leaf, Drop, Squircle, Message).
• Triangle Generator — Produce el clásico triángulo con truco de borde de ancho/alto cero en cuatro direcciones (up, down, left, right) con tamaño y color ajustables.
• Glassmorphism Generator — Controla cantidad de blur, opacidad de fondo, color de fondo, opacidad del borde, ancho del borde, blur de sombra y opacidad de sombra. La vista previa renderiza una tarjeta esmerilada sobre un fondo de gradiente de múltiples círculos en vivo.
• Fluid Typography / Clamp Generator — Establezca tamaño de fuente mínimo, máximo, viewport mínimo y máximo. La herramienta calcula la pendiente de interpolación lineal y la ordenada al origen, produce un valor clamp() y muestra el tamaño en píxeles resuelto en cualquier ancho de viewport de vista previa.
• Neumorphism Generator — Cuatro tipos de forma (flat, concave, convex, pressed) con controles para distancia, intensidad, blur, border radius, tamaño y color de fondo.
• Image Filter Generator — Ocho funciones de filtro CSS: brightness, contrast, saturation, hue-rotate, blur, grayscale, sepia e invert. Suba su propia imagen o use el marcador de posición de gradiente integrado. Cinco presets con nombre (Vintage, B&W, Warm, Cool, Dramatic).
• Typography Properties Generator — Establece font-size, line-height, letter-spacing, word-spacing, text-transform, text-decoration, font-weight (100–900), font-style, text-shadow (X, Y, blur, color) y color de texto.
• 3D Transform Generator — Controles deslizantes para rotateX/Y/Z (±180°), translateX/Y/Z (±200 px), perspective (100–2000 px) y scale. Produce perspective, transform y transform-style: preserve-3d.
• Keyframe Animation Builder — Nombre la animación, elija una propiedad CSS de un menú desplegable (transform, opacity, background-color, etc.), establezca duración, función de temporización y cantidad de iteraciones. Añada o elimine paradas de keyframe con posiciones de porcentaje personalizadas y valores, luego previsualice la animación en vivo.

Cómo Usar la CSS Generator Suite

Paso 1: Elegir una Pestaña de Generador

Abra la herramienta en /developer/css/css-generators. La interfaz se abre en la pestaña Box Shadow. La barra de pestañas ocupa el ancho completo del panel y se envuelve en pantallas más pequeñas. Haga clic en cualquier pestaña para cambiar de generador — el estado de cada generador se preserva mientras navega entre pestañas durante la misma sesión.

Paso 2: Ajustar los Controles

Cada generador sigue el mismo patrón: controles en un lado (o arriba), vista previa en vivo debajo de los controles y un bloque de salida CSS en la parte inferior.

Para el generador Box Shadow:

• La sombra predeterminada comienza en offsetX 4 px, offsetY 4 px, blur 8 px, spread 0 px, color #00000040, inset desactivado.
• Arrastre cualquier control deslizante y el cuadro de vista previa blanco actualiza su sombra inmediatamente.
• Haga clic en la muestra de color para abrir el selector de color nativo del navegador. El componente añade automáticamente 40 (25% de opacidad en hex) al color seleccionado.
• Marque la casilla Inset para voltear la sombra hacia el interior del elemento.
• Haga clic en "Add Shadow" para introducir una segunda capa — cada capa obtiene su propia fila de controles y un botón de papelera para eliminarla (la última capa restante no puede eliminarse).

Para el generador Flexbox, cuatro cuadros numerados ilustran la alineación actual. Cambiar flex-direction a column y justify-content a space-between actualiza sus posiciones en tiempo real.

Paso 3: Leer el CSS Generado

El bloque de salida CSS aparece en una fuente monoespaciada debajo de los controles de cada generador. Para Box Shadow el formato es:

box-shadow: 4px 4px 8px 0px #00000040, inset 2px 2px 4px 0px #ffffff20;

Para el Unit Converter, la salida son cuatro tarjetas clicables en lugar de un bloque de código — haga clic en cualquier tarjeta para copiar su valor (por ejemplo, 1.5rem) directamente al portapapeles.

Paso 4: Copiar y Pegar

Cada generador tiene un botón Copiar en la esquina superior derecha de la tarjeta de salida. Hacer clic en él escribe la declaración completa en su portapapeles y activa una notificación toast "Copied to clipboard". Puede pegar directamente en su hoja de estilos o configuración de Tailwind.

Paso 5: Usar la Pantalla de Fórmula de Fluid Typography

La pestaña Fluid Typography incluye una tarjeta de fórmula que expone la pendiente y la ordenada al origen para que pueda verificar o documentar las matemáticas:

font-size = 16px + (32 - 16) * ((100vw - 320px) / (1200 - 320))
slope = 1.7241vw | intercept = -0.5rem

La salida generada se ve así:

font-size: clamp(1.0000rem, -0.5rem + 1.7241vw, 2.0000rem);

Ejemplos Prácticos

Sombra de Tarjeta en Capas

Un patrón de diseño común usa dos capas de box shadow para simular luz ambiental y directa:

1. Abra la pestaña Box Shadow.
2. Establezca Shadow 1 en offsetX 0, offsetY 2 px, blur 4 px, spread 0, color #00000020, inset desactivado.
3. Haga clic en "Add Shadow". Establezca Shadow 2 en offsetX 0, offsetY 8 px, blur 24 px, spread 0, color #00000014, inset desactivado.
4. Copie el resultado: box-shadow: 0px 2px 4px 0px #00000020, 0px 8px 24px 0px #00000014;

Tamaño de Fuente de Titular Responsivo

Un titular de 20 px en móvil (viewport de 320 px) que escala a 48 px en escritorio (1440 px):

1. Abra la pestaña Fluid Typography.
2. Establezca tamaño de fuente mínimo en 20, máximo en 48, viewport mínimo en 320, máximo en 1440.
3. Arrastre el control deslizante de viewport de vista previa para verificar tamaños intermedios.
4. Copie: font-size: clamp(1.25rem, 0.2143rem + 3.2143vw, 3rem);

Tarjeta Glassmorphism

Para una tarjeta de notificación de vidrio esmerilado sobre un gradiente oscuro:

1. Abra la pestaña Glassmorphism.
2. Establezca color de fondo en blanco (#ffffff), opacidad al 15%, blur a 16 px, opacidad del borde al 25%, ancho del borde a 1 px, blur de sombra a 32 px, opacidad de sombra al 8%.
3. La salida incluye automáticamente el prefijo de proveedor -webkit-backdrop-filter.

Consejos y Mejores Prácticas

Las capas inset de Box Shadow añaden profundidad a los campos de entrada. Use una pequeña sombra inset (inset 0px 2px 4px 0px #0000001a) junto con una sombra exterior en una tarjeta para que los campos del formulario parezcan hundidos. El generador le permite combinar ambos en una sola declaración de múltiples capas.

Para el generador Fluid Typography, verifique el ajuste en los límites. El control deslizante de viewport de vista previa comienza en 280 px y va hasta 1920 px. Arrástrelo a sus viewports mínimo y máximo para confirmar que el tamaño de fuente se mantiene exactamente en sus valores especificados en ambos extremos — la función clamp() lo garantiza, pero verlo es tranquilizador.

En el generador Cubic Bezier, aplique primero un preset. Los diez presets con nombre (ease-out-back, ease-in-cubic, etc.) sirven como puntos de partida. Aplique uno, luego ajuste finamente los controles deslizantes P1 y P2. El canvas redibuja la curva y el bloque de vista previa de movimiento se anima en cada cambio.

El tamaño de fuente base del Unit Converter es 16 px por defecto, pero la raíz del navegador puede diferir. Si su proyecto establece html { font-size: 62.5% } (10 px), cambie el campo de tamaño de fuente base a 10 antes de convertir.

Los presets de polígono de Clip Path producen coordenadas basadas en porcentaje, por lo que escalan correctamente en cualquier tamaño de elemento. El preset de estrella usa diez puntos y funciona como una insignia decorativa solo con CSS.

El Keyframe Animation Builder requiere al menos dos keyframes. El botón de eliminar está desactivado cuando solo quedan dos fotogramas.

Problemas Comunes y Solución de Problemas

El color de box shadow muestra solo los primeros seis caracteres hex en el selector de color. El componente siempre añade 40 como canal alfa en hex (formato #rrggbbaa). El <input type="color"> nativo muestra solo la parte RGB. Esto es esperado — el alfa se aplica por separado al 25% de opacidad. Si necesita una opacidad diferente, copie la salida y ajuste manualmente los últimos dos dígitos hex (por ejemplo, 80 para 50%, ff para 100%).

El generador Fluid Typography produce valores de intercepción negativos. Esto es correcto cuando la ordenada al origen de la ecuación lineal cae por debajo de cero. El valor clamp() aún se resuelve a valores dentro del rango mín/máx que especificó — la intercepción negativa es un artefacto de la interpolación lineal, no un error.

La vista previa de Glassmorphism puede aparecer como un color sólido en algunos navegadores. La propiedad CSS backdrop-filter requiere aceleración de hardware y no es compatible con todos los entornos. El generador produce el prefijo -webkit-backdrop-filter junto a la propiedad estándar, pero la vista previa en la herramienta en sí se verá afectada si su navegador no admite la propiedad.

La vista previa de 3D Transform parpadea al cambiar de pestaña. La transition: transform 0.2s aplicada al elemento de vista previa se reproduce al montarse. Este es un artefacto cosmético del ciclo de montaje de la pestaña y no afecta el código generado.

La entrada de texto libre de columnas del Grid Builder acepta cualquier cadena. Si escribe un valor inválido como abc 1fr, la salida CSS contendrá ese valor inválido y la vista previa en vivo recurrirá silenciosamente a los valores predeterminados del navegador. Use solo valores de pista de cuadrícula CSS válidos: 1fr, auto, min-content, max-content, repeat(3, 1fr) o valores fijos de píxeles/porcentaje.

Privacidad y Seguridad

La CSS Generator Suite se ejecuta completamente en su navegador. No se envían valores CSS, selecciones de color ni datos de entrada a ningún servidor. Los quince generadores calculan su salida usando JavaScript puro — no se cargan bibliotecas externas en tiempo de ejecución. La imagen que carga en el generador Image Filter se abre como una URL de objeto local (URL.createObjectURL) y nunca se transmite por la red. La herramienta funciona completamente sin conexión una vez que la página se ha cargado.

Preguntas Frecuentes

¿Es gratuita la CSS Generator Suite? Sí, la herramienta es completamente gratuita y no requiere cuenta. Abra la página y comience a generar inmediatamente.

¿Funciona sin conexión? Sí. Una vez que la página se ha cargado en su navegador, todos los generadores funcionan sin conexión a internet porque cada cálculo se ejecuta localmente en JavaScript.

¿Están seguros mis datos? Sus entradas nunca salen de su navegador. No hay análisis de valores CSS individuales, ni envíos de formularios, ni procesamiento del servidor de ningún tipo.

¿Cuántas capas de box shadow puedo añadir? La interfaz no impone un límite estricto en las capas de sombra — puede seguir haciendo clic en "Add Shadow" para apilar tantas capas como sea necesario. Los navegadores admiten cualquier número de valores de sombra separados por comas en una sola declaración box-shadow, aunque la salida generada puede volverse muy larga con muchas capas.

¿Produce la herramienta clases Tailwind además de CSS vanilla? La descripción de configuración y algunos generadores hacen referencia a la salida Tailwind. El unit converter copia valores en unidades sin procesar adecuadas para un archivo de configuración Tailwind. Otros generadores producen declaraciones de propiedades CSS estándar que puede usar directamente en la prop style de Tailwind o bloques @layer.

¿Puedo usar la salida del generador clip-path para SVG? No. La salida usa la sintaxis de porcentaje CSS clip-path (por ejemplo, polygon(50% 0%, 100% 100%, 0% 100%)), que se aplica a elementos HTML. Los elementos SVG clipPath usan un sistema de coordenadas y sintaxis diferente.

El canvas de cubic bezier no muestra la curva en móvil — ¿es un error? El elemento canvas se renderiza usando el contexto 2D de HTML5. En algunos navegadores móviles, los canvas dentro de contenedores de desbordamiento desplazables pueden no renderizarse correctamente hasta que ocurre un evento de desplazamiento. Intente desplazar la página ligeramente para activar un redibujado, o use un navegador de escritorio para la pestaña bezier.

¿Qué hace la opción de sintaxis de 8 valores en el Border Radius Generator? CSS border-radius acepta un segundo conjunto opcional de cuatro valores separados por una barra: border-radius: TL TR BR BL / TL TR BR BL. El primer conjunto controla el radio horizontal de cada esquina y el segundo controla el radio vertical, produciendo esquinas elípticas. Esto crea formas de blob orgánicas que no pueden lograrse con la sintaxis estándar de 4 valores.

¿Puedo guardar mis configuraciones entre sesiones? La herramienta no persiste configuraciones en localStorage entre cargas de página — reabrir la página restablece todos los generadores a sus valores predeterminados. Si encuentra una combinación que desea reutilizar, copie la salida CSS a su editor o hoja de estilos inmediatamente.

¿Usa el generador Fluid Typography min() y max() o clamp()? El generador produce clamp(min, preferred, max). El valor preferido es la expresión de interpolación lineal (intercept + slope * vw). Este es el enfoque moderno recomendado y es compatible con todos los navegadores actuales.

Herramientas Relacionadas

• CSS Generators — La suite en sí, para todo lo que no cubren las herramientas especializadas a continuación.
• Type Scale Generator — Construya una escala tipográfica modular completa con proporciones musicales, produciendo variables CSS, variables SCSS o un bloque de configuración fontSize de Tailwind.
• Glitch Effect Generator — Genere efectos de texto glitch CSS animados con colores, velocidad e intensidad personalizables.
• Color Converter — Convierta hex, RGB, HSL y otros formatos de color para usar en sus entradas de generador CSS.
• Gradient Generator — Cree fondos de gradiente CSS con vista previa en vivo.

Pruebe la CSS Generator Suite ahora: CSS Generator Suite