Generador de Gradientes CSS - Crear Gradientes Lineales y Radiales Online
Crea gradientes CSS con vista previa en vivo. Genera gradientes lineales y radiales, copia código CSS o exporta como clases Tailwind.
Preguntas Frecuentes
Que es un gradiente CSS?
Un gradiente CSS es una transicion suave entre dos o mas colores creada puramente con codigo CSS, sin necesidad de archivos de imagen. Los gradientes pueden ser lineales (en linea recta), radiales (emanando desde un punto central) o conicos (alrededor de un punto central). Son ligeros, escalables y perfectos para fondos, botones y elementos de interfaz.
Cual es la diferencia entre gradientes lineales y radiales?
Los gradientes lineales transicionan colores a lo largo de una linea recta en un angulo especificado (por ejemplo, de izquierda a derecha, de arriba a abajo o en diagonal). Los gradientes radiales transicionan colores hacia afuera desde un punto central, creando patrones circulares o elipticos. Usa gradientes lineales para efectos direccionales y gradientes radiales para efectos de foco o brillo.
Como uso este generador de gradientes?
Selecciona el tipo de gradiente (Lineal o Radial), agrega o ajusta los puntos de color haciendo clic en los selectores de color, establece la direccion/angulo usando el selector visual o el campo de entrada, previsualiza tu gradiente en tiempo real, luego copia el codigo CSS o las clases de Tailwind usando los botones de copiar.
Que es la salida de Tailwind CSS y cuando debo usarla?
Tailwind CSS es un framework CSS de utilidades muy popular en el desarrollo web moderno. Si tu proyecto usa Tailwind, puedes copiar las clases generadas (como bg-gradient-to-r from-blue-500 to-purple-500) directamente en tu HTML. Nota: Tailwind solo soporta gradientes lineales con 2-3 puntos de color.
Cuantos puntos de color puedo agregar?
Puedes agregar hasta 10 puntos de color en un solo gradiente. Cada punto puede tener su propio color y posicion (0-100%). Se requiere un minimo de 2 puntos de color para que se muestre un gradiente. Arrastra los marcadores en la barra de gradiente para ajustar las posiciones.
Es seguro y privado este generador de gradientes?
Si. Esta herramienta se ejecuta 100% en tu navegador usando JavaScript del lado del cliente. Ningun dato de gradiente se envia a ningun servidor. Toda la generacion y salida de codigo ocurre localmente en tu dispositivo, lo que lo hace seguro para colores de marca propietarios y trabajo de diseno confidencial.
Ejemplos de Codigo
// Create CSS gradients programmatically
function createLinearGradient(angle, colorStops) {
const stops = colorStops
.map(stop => `${stop.color} ${stop.position}%`)
.join(', ');
return `linear-gradient(${angle}deg, ${stops})`;
}
function createRadialGradient(shape, position, colorStops) {
const stops = colorStops
.map(stop => `${stop.color} ${stop.position}%`)
.join(', ');
return `radial-gradient(${shape} at ${position.x}% ${position.y}%, ${stops})`;
}
// Usage
const linear = createLinearGradient(135, [
{ color: '#667eea', position: 0 },
{ color: '#764ba2', position: 100 }
]);
console.log(linear);
// linear-gradient(135deg, #667eea 0%, #764ba2 100%)
document.body.style.background = linear;