Tool overview
¿Qué es Generador de gradientes CSS?
Generador de gradientes CSS es una herramienta que le permite diseñar gradientes CSS multipunto lineales, radiales y cónicos con OKLCH y exportación Tailwind.
¿Por qué usar Generador de gradientes CSS?
Mejora la legibilidad y agiliza su flujo cuando necesita diseñar gradientes CSS multipunto lineales, radiales y cónicos con OKLCH y exportación Tailwind, sin enviar datos a un servidor.
Funciones clave
Privacidad en el cliente, resultados instantáneos y copia con un clic para generador de gradientes CSS. diseñar gradientes CSS multipunto lineales, radiales y cónicos con OKLCH y exportación Tailwind
Cómo usar
Siga estos pasos para obtener resultados precisos con la herramienta de arriba.
- Elija lineal, radial o cónico y añada paradas de color en la vista previa en vivo.
- Ajuste el ángulo o la posición del centro, active OKLCH para mezclas más suaves y compare con sRGB si hace falta.
- Copie CSS, clases arbitrarias de Tailwind o propiedades CSS—o copie un enlace para restaurar el gradiente después.
- Pegue una declaración background: linear-gradient(...) en Importar CSS para reconstruir las paradas.
- Vaya a Conversor de color o Contraste WCAG desde Herramientas relacionadas para validar los colores.
Guía del generador de gradientes CSS: linear-gradient, OKLCH, cónico y Tailwind
Use este generador gratis para crear CSS linear-gradient, radial-gradient y conic-gradient multipunto con interpolación OKLCH (CSS Color 4), fallbacks @supports, clases Tailwind y URL compartibles.
Gradientes lineales
Ángulo en grados con paradas de color ilimitadas, posiciones y opacidad. Interpolación opcional in oklch.
Gradientes radiales
Círculo o elipse desde un centro porcentual con rampas de color de varias paradas.
Gradientes cónicos
Barrido de colores alrededor de un centro con ángulo from para tortas y efectos arcoíris.
Color y opacidad multipunto
Añada, quite, invierta o aleatorice paradas; importe CSS de background pegado.
Interpolación de color OKLCH
Mezclas perceptuales por defecto con fallback sRGB vía @supports para navegadores antiguos.
CSS, Tailwind y variables CSS
Exporte CSS de fondo, clases arbitrarias Tailwind o propiedades personalizadas :root.
URL compartibles e importación CSS
Sincronice la configuración en ?g= / #g= y restaure desde CSS de gradiente pegado.
Traspaso de accesibilidad
Enlace profundos de paradas a Contraste WCAG y Conversor de color.
Texto con gradiente CSS
Exporte el gradiente y aplíquelo con background-clip: text y color transparente (-webkit-background-clip: text en Safari).
Borde con gradiente CSS
Use el gradiente en un contenedor con padding y fondo interior sólido, o border-image con el mismo gradiente.
Animar gradientes CSS
Exporte CSS estático aquí y anime background-position o propiedades personalizadas en su hoja de estilos.
CSS gradient border
Common patterns: (1) a padded wrapper with the exported gradient background and an inner element with a solid fill, or (2) `border-image` using the same gradient. Prefer the wrapper approach when you need rounded corners and consistent cross-browser results.
Animating CSS gradients
This generator exports static gradient CSS. Animate in your stylesheet by shifting `background-position` on a larger gradient, or by transitioning CSS custom properties that feed into `linear-gradient()` / `conic-gradient()`.
Preguntas frecuentes
Respuestas sobre depuración habitual y privacidad de sus datos.
Documentación oficial y referencias
Especificaciones y documentación de plataforma para esta utilidad.