Mejor gratis Generador de grados CSS
Construye gradientes CSS lineales y radiales con una vista previa en vivo — copia el código de fondo.
100% gratis
No hay registro
Sin marca de agua
Archivos procesados en memoria, nunca almacenados
✨
Go Pro para los mejores modelos de IA —imagen, video y chat— además de cargas más grandes, prioridad en la cola y sin esperar.
Actualizar a Pro
Amor best.free? Compártelo
Cómo funciona
- Elija un tipo. Elija lineal o radial, y establezca el ángulo para un gradiente lineal.
- Elegir colores y paradas. Establecer dos o más colores y sus posiciones; añadir una tercera parada en Opciones avanzadas.
- Copiar el CSS. Pulse Copiar CSS y pegar el gradiente de fondo en su hoja de estilos.
Acerca de esta herramienta
Construye un gradiente CSS a ojo en lugar de editar valores ciegos. Cambia entre lineal y radial, arrastra el ángulo para un gradiente lineal y elige colores y posiciones para al menos dos paradas mientras una barra de vista previa de ancho completo actualiza en vivo. Copia la propiedad de fondo resultante directamente en tu hoja de estilos. Las opciones Advanced añaden una tercera parada de color para mezclas más ricas y te permiten elegir un círculo o forma elipse para gradientes radiales. Todo se ejecuta en tu navegador.
Para qué la gente lo usa
- Diseñar un héroe o sección de gradiente de fondo
- Crear un botón o gradiente de tarjeta de relleno
- Mezclar dos o tres colores de marca sin problemas
- Generar un efecto de foco radial o viñeta
Preguntas frecuentes
Un gradiente lineal se mezcla a lo largo de una línea recta en el ángulo que elija; un gradiente radial se mezcla hacia fuera desde un punto central como un círculo o elipse.
Para un gradiente lineal el ángulo establece la dirección de la mezcla — 0° va de abajo a arriba, 90° de izquierda a derecha, y así sucesivamente.
Cada parada es un color situado en un porcentaje a lo largo del gradiente. Mover una parada cambia donde se sienta ese color y cuán nítida es la mezcla.
Sí. Abra Opciones avanzadas para añadir un tercer punto de color, insertado entre el primero y el último para una mezcla multicolor.
No. Los colores y paradas se convierten en una cadena CSS localmente en su navegador.
Completamente gratis, sin cuenta y sin límites — una herramienta del lado del cliente sin nada que medir.
Sí. Se ejecuta en su navegador, por lo que CSS Gradient Generator funciona en teléfonos y tabletas, así como de escritorio — no hay ninguna aplicación para instalar.
Normalmente, sólo unos segundos para un archivo típico — CSS Gradient Generator comienza a trabajar en el momento en que le da su entrada.
El uso casual es ilimitado, bajo una generosa tapa de uso justo que lo mantiene rápido para todos.
Todos los navegadores modernos — Chrome, Safari, Firefox y Edge. CSS Gradient Generator no necesita nada instalado más allá del navegador que ya utiliza.