Generadores CSS gratuitos
Generadores de código CSS visuales con vista previa en directo. Ajusta los parámetros y copia CSS listo para producción al instante.
Todos los generadores CSS
Generador de degradado CSS
Crea bonitos degradados CSS con un editor visual. Degradados lineales y radiales con múltiples paradas de color. Copia código CSS al instante.
Generador CSS Box Shadow
Generador visual de sombras de caja CSS con vista previa en directo. Ajusta los desplazamientos, el desenfoque, la dispersión, el color y la inserción.
Generador CSS Text Shadow
Crea efectos CSS de sombra de texto con un constructor visual. Ajusta el desplazamiento, el desenfoque, el color y añade varias capas.
Generador CSS Border Radius
Diseña valores de radio de borde CSS personalizados con un constructor visual. Ajusta cada esquina individualmente y copia el CSS al instante.
Generador CSS Clip-Path
Generador visual gratuito de trazados de clip CSS. Crea trazados de clip poligonales, circulares.
Generador de cristalmorfismo CSS
Crea efectos CSS de vidrio esmerilado con vista previa en directo. Personaliza el desenfoque, la transparencia y el borde.
Generador CSS Cubic Bezier
Genera visualmente funciones de animación CSS cubic-bezier(). Arrastra puntos de control, previsualiza la animación y copia el código.
Generador de triángulos CSS
Genera triángulos CSS puros con dirección, tamaño y color personalizados. Vista previa en vivo y copia CSS listo para producción. Gratis, sin registro.
Generador de CSS Loader / Spinner
Genera bonitos spinners y animaciones CSS de carga. Personaliza el color, el tamaño y la velocidad. Copia código CSS puro. Gratis, sin registro.
Generador de patrones CSS
Genera hermosos patrones de fondo CSS. Elige entre rayas, puntos, damero, zigzag y más. Personaliza los colores y el tamaño.
Conversor gratuito de PX a REM
Conversor gratuito en línea de PX a REM. Convierte píxeles a rem y rem a píxeles con un tamaño de fuente base configurable.
Minificador de CSS
Minificador de CSS en línea gratuito. Comprime CSS eliminando comentarios, espacios en blanco y optimizando valores.
Generador de animaciones CSS
Generador gratuito de animaciones CSS. Construye @keyframes visualmente con controles de temporización, duración, facilitación y transformación.
Visualizador de modelos de cajas CSS
Visualizador interactivo de modelos de cajas CSS. Ajuste el margen, el borde, el relleno y las dimensiones del contenido y vea el resultado en directo.
Generador CSS multicolumna
Generador gratuito de diseños CSS multicolumna. Construye diseños de columnas estilo periódico con previsualización en vivo y copia el código CSS al.
Generador de filtros CSS
Generador gratuito de filtros CSS para ajustar el brillo, el contraste, el desenfoque, la saturación, la rotación de tonos, la escala de grises, el sepia.
Generador de trazos de texto CSS
Generador gratuito de trazos de texto CSS. Cree texto contorneado, hueco y trazado con vista previa en directo. Ajuste el color, el ancho y la sombra.
Generador de bordes degradados CSS
Generador gratuito de bordes degradados CSS. Crea impresionantes bordes degradados con vista previa en directo, radio, anchura y colores ajustables.
Generador CSS Flexbox
Generador visual gratuito de CSS Flexbox. Configure el contenedor flex y los elementos con vista previa en vivo.
Generador de degradado de texto CSS
Crea hermosos efectos de texto degradado con vista previa en vivo y copia el código CSS al instante.
Generador de rejilla CSS
Generador visual gratuito de CSS Grid. Define columnas, filas, espacio y alineación con vista previa en vivo, luego copia el código CSS generado.
Conversor de unidades CSS
Convierte entre unidades CSS: px, rem, em, vw, vh, vmin, vmax, pt, cm, mm, in, %.
Sobre nuestros generadores CSS
Absolutool incluye 12 generadores CSS visuales con vista previa en vivo y código listo para copiar. Cada generador te permite ajustar valores con sliders, manijas o controles, y ver el resultado al instante · sin necesidad de conocimientos de CSS. Cuando te guste cómo se ve, copia el código con un clic.
Nuestras herramientas CSS cubren las propiedades CSS más buscadas: gradientes (lineales y radiales), sombras de caja y sombras de texto, border-radius, clip paths (polígono, círculo, elipse), glassmorphism, curvas Bézier cúbicas para animaciones, triángulos CSS puros, spinners de carga, patrones de fondo y conversión de unidades. Perfecto tanto para principiantes que aprenden CSS como para desarrolladores experimentados que quieren afinar visualmente sus estilos.
Por qué importan los generadores visuales de CSS
Escribir CSS a mano para propiedades como linear-gradient(135deg, #667eea 0%, #764ba2 100%), box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) o clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) exige conocerte la sintaxis al dedillo e imaginar el resultado visual antes de poder verlo. Los generadores visuales invierten ese orden: arrastra un control deslizante, elige un color, observa cómo se actualiza la vista previa y luego copia el código generado. Las herramientas de esta categoría producen CSS conforme a los estándares que funciona en todos los navegadores publicados en los últimos cinco años, sin sintaxis propietaria ni preprocesador requerido.
Cada generador de este sitio es una sola página HTML con un panel de vista previa en vivo y un conjunto de controles. A medida que ajustas los valores, la vista previa se vuelve a representar en tiempo real usando el CSS real que el generador copiará. No hay un motor de representación propietario que finja ser CSS; lo que ves es exactamente lo que verán tus usuarios. El código generado usa sintaxis moderna (propiedades personalizadas de CSS cuando procede, propiedades lógicas para la compatibilidad con RTL, OKLCH para las herramientas de color más recientes) pero recurre con elegancia a alternativas cuando necesitas compatibilidad con navegadores antiguos: puedes reducir un solo ajuste por herramienta para pasar a una variante compatible con lo antiguo.
Compatibilidad de navegadores y prefijos de proveedor
Las especificaciones de CSS han sido notablemente estables desde 2018: degradados, transformaciones, sombras, animaciones, flexbox, grid y clip-path funcionan todos sin prefijos en todos los navegadores principales (Chrome, Firefox, Safari, Edge). El puñado de propiedades que aún necesitan prefijos son en su mayoría experimentales (la subcuadrícula de CSS en Safari antiguos, las animaciones impulsadas por el desplazamiento). Los generadores emiten por defecto CSS estándar sin prefijos que puedes pegar directamente en una hoja de estilos. El backdrop-filter (usado en el generador de glassmorfismo) fue el último rezagado común, pero llegó a la versión estable de Firefox 103 (julio de 2022) y Safari lo admite mediante -webkit-backdrop-filter desde hace años. Los proyectos modernos rara vez necesitan autoprefixer para las propiedades que cubren estas herramientas.
Si tu objetivo es Internet Explorer 11 (un público en extinción pero real para algunas intranets de empresa), la mayoría de las propiedades de aquí no tienen compatibilidad. El generador de grid recurre con elegancia a alternativas porque IE11 admite una sintaxis de grid más antigua lo bastante parecida para maquetaciones sencillas, pero funciones avanzadas como subgrid o gap no se representarán. Para públicos modernos, la regla general es «usa la sintaxis estándar que producen estas herramientas, omite los prefijos y acepta que el muy reducido público de IE restante verá una maquetación simplificada». caniuse.com sigue siendo la referencia canónica para cualquier propiedad de la que no estés seguro.
Consideraciones de rendimiento
Los efectos visuales pueden convertirse rápidamente en trampas de rendimiento. Una sombra de varias capas se pinta una vez por fotograma, lo que es barato; un filter: blur(20px) en una cabecera fija fuerza un repintado en cada evento de desplazamiento y hunde la tasa de fotogramas en móvil. La herramienta de Bézier cúbica te ayuda a afinar las curvas de animación para que se sientan bien; combinarla con will-change: transform en el elemento animado mantiene al navegador listo para componer la animación en la GPU en lugar de repintar la página. La regla general: anima transform y opacity; todo lo demás (ancho, alto, top, left, color) desencadena maquetación o pintado y debe usarse con moderación en las animaciones.
El generador de glassmorfismo es el más pesado de los efectos visuales de aquí porque backdrop-filter: blur(20px) obliga al navegador a capturar el fondo, desenfocarlo y recomponer en cada fotograma en que el elemento de cristal esté visible. En un ordenador con gráficos dedicados esto es invisible; en un teléfono de gama media puede bajar la tasa de fotogramas de 60 a 30 por segundo. El generador de patrones CSS produce patrones basados en SVG cuyo coste es insignificante. Los cargadores y las animaciones se mantienen fluidos mientras animen transform/opacity. Si tu diseño apila tres o más capas de desenfoque, pruébalo en un teléfono de gama media antes de publicar; la diferencia entre «elegante» y «con tirones» puede ser una sola capa de más.
El CSS en los sistemas de diseño
Los sistemas de diseño modernos expresan los colores, los espaciados y las elevaciones como propiedades personalizadas (variables CSS) y luego construyen los estilos de los componentes encima. Los generadores de aquí producen valores directos para que los pegues tal cual en un componente, pero son igual de útiles para cosechar tokens del sistema: copia tres o cuatro sombras de profundidad creciente en tus tokens --shadow-sm, --shadow-md, --shadow-lg; copia dos degradados en --bg-primary y --bg-secondary; copia una secuencia de valores de border-radius en --radius-sm y compañía. El generador te ayuda a tomar esas decisiones de forma visual en lugar de adivinar los números y recargar la página.
El generador de CSS Grid emite grid-template-columns y grid-template-rows con líneas con nombre, que es lo que quieres para un sistema. El generador de Flexbox hace lo mismo para las maquetaciones flex. Ambos producen código que puedes envolver en una clase o un componente de Tailwind tal cual. Para proyectos que usan Tailwind, los valores suelen traducirse directamente: un hueco de 1rem se convierte en gap-4, un radio de borde de 0.5rem se convierte en rounded-md. Para proyectos sin Tailwind, las variables CSS en bruto suelen ser exactamente lo que querrías en el archivo del sistema de diseño. El paso de selección visual es la parte que no puedes automatizar con facilidad.
Preguntas frecuentes
¿Funcionan estos generadores de CSS en navegadores antiguos?
La sintaxis estándar que emiten es compatible con todos los navegadores publicados desde 2019, lo que cubre más del 97 % de los usuarios mundiales según los datos de StatCounter y caniuse. Para Internet Explorer 11 (alrededor del 0,5 % del tráfico mundial, sobre todo usuarios de intranets de empresa) la mayoría de las funciones no se representarán. Safari moderno admite backdrop-filter mediante el prefijo -webkit-, que la herramienta de glassmorfismo emite junto a la propiedad estándar.
¿Por qué mi degradado se ve con bandas?
El color de 8 bits (256 niveles por canal) no puede representar la mezcla suave entre dos colores cercanos a lo largo de una distancia grande: verás «bandas» visibles en una pantalla calibrada. Soluciones: estira menos el degradado, añade un tercer punto de color para romper la banda, aplica tramado al degradado con un filtro de ruido SVG, o usa la interpolación de degradado OKLCH (compatible con Chrome y Safari) que interpola en un espacio perceptualmente uniforme.
¿Debo usar keyframes de CSS o transiciones?
Las transiciones sirven para pasar de un estado a otro (al pasar el cursor, al hacer clic, al enfocar); son declarativas y el navegador se encarga del resto. Los keyframes sirven para animaciones con varios pasos o una secuencia definida (un indicador de carga, una serie de apariciones escalonadas). Para un cambio de estado simple usa transiciones; para cualquier cosa de varios pasos usa keyframes. Los generadores de Bézier cúbica y de animación de este sitio cubren ambos casos.
¿Cómo consigo que un efecto de glassmorfismo quede bien?
Tres ajustes son los que más importan: un fondo semitransparente (de rgba(255,255,255,0.1) a 0.3), un backdrop-filter: blur() real en el rango de 10 a 30px, y un borde de 1px a 1,5 veces el alfa del fondo para dar un borde al cristal. Sin los tres, queda plano. El generador de glassmorfismo de este sitio ajusta los tres a la vez e incluye la alternativa de Safari -webkit-backdrop-filter.
¿Cuál es la diferencia entre rem, em y px?
El px es un tamaño absoluto: 1px es un píxel de CSS, que el navegador escala a píxeles físicos según la relación de píxeles del dispositivo. El em es relativo al tamaño de fuente del elemento padre, así que 1.5em en un hijo de un elemento con fuente de 16px son 24px. El rem es relativo al tamaño de fuente del elemento raíz html, por defecto 16px, pero modificable mediante el tamaño de fuente raíz por accesibilidad. Usa rem para tamaños que deban respetar el zoom y las preferencias de tamaño de fuente del navegador del usuario, y px para tamaños que deban ser invariables (bordes de 1px, tamaños de icono fijos).
¿Necesito un preprocesador de CSS para usar estas herramientas?
No. Cada generador emite CSS estándar que funciona directamente en un archivo .css. Los preprocesadores (Sass, Less, Stylus) son útiles cuando quieres variables, anidamiento, mixins o cálculo en tiempo de compilación, pero el CSS moderno ahora admite de forma nativa las propiedades personalizadas (variables), el anidamiento y muchas otras funciones que antes requerían un preprocesador. La salida de estas herramientas es independiente del preprocesador: pégala en un archivo Sass o en un archivo CSS simple por igual.