Saltar al contenido
Toolars
Explorar
Informar de un error

Diseño · utilidad Local

Generador de degradados CSS

CSS Gradient Generator

Compone degradados lineales o radiales con dirección, colores y paradas ajustables, y copia la declaración lista para tu hoja de estilos. En local.

Ruta de la tarea / de la entrada al resultado

Elige el tipo de degradado

Funciona en local · No se sube nada

Cómo funciona Generador de degradados CSS, privacidad y herramientas relacionadas

Ruta de la tarea / de la entrada al resultado

Cómo componer un degradado CSS

  1. 01

    Elige el tipo de degradado

    Abre Tipo de degradado y elige Lineal para una mezcla recta o Radial para una circular. La insignia de la vista previa muestra el ángulo actual mientras trabajas.

  2. 02

    Define la dirección o el foco

    Dirección / foco va de 0 a 360. Para un degradado lineal es el ángulo en grados; para uno radial coloca el punto de foco en un anillo alrededor del centro. La insignia sigue el valor en vivo, lo que facilita juzgar las correcciones pequeñas.

  3. 03

    Elige colores y paradas

    Define Color inicial y Color final, y luego posiciona Parada inicial (0–99%) y Parada final (1–100%). El inicio debe ir antes que el final, o el estado cambia a REVISA LOS VALORES.

  4. 04

    Controla la banda de mezcla

    La distancia entre las dos paradas es la zona de transición: paradas separadas por 1% producen un borde casi duro para franjas bicolores, mientras paradas en 0% y 100% — los valores predeterminados — dan la mezcla más suave a todo lo ancho. Mira la vista previa y no los números.

  5. 05

    Copia la declaración

    Pulsa Copiar CSS o Descargar .css para guardar toolars-gradient.css. La regla .gradient es una sola declaración background — linear-gradient(…deg, …) o radial-gradient(circle at …, …) — ajustada exactamente a tus paradas.

  6. 06

    Aplícala y extiéndela

    La declaración única se combina limpiamente con tus propios background-size o background-repeat. ¿Necesitas un tercer color? Copia la regla e inserta una parada intermedia a mano: las dos paradas que ajustaste anclan los dos extremos de la mezcla. Al ser una sola línea, también se pega bien en una custom property si tu sistema de diseño guarda tokens así.

Datos de la herramienta

Procesamiento
En tu navegador
La entrada sale del dispositivo
Nunca
Retención
No se guarda nada
Precio
Gratis

Tus datos se quedan en el navegador.

Generador de degradados CSS usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.

Ejecución local

Se ejecuta dentro de la pestaña actual del navegador.

Sin procesamiento oculto

Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.

No se necesita cuenta

Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.

Restablecimiento inmediato

Limpia la pestaña y los datos de trabajo activos desaparecen.

Qué hace Generador de degradados CSS en realidad

Una banda hero que se funde del azul de marca al turquesa, un resplandor radial suave detrás de una foto de producto, una franja bicolor de corte duro en una tabla de precios: los degradados sostienen más interfaces que cualquier recurso de imagen. El modo radial se gana su sitio con resplandores y viñetas que una mezcla lineal no puede fingir. Componer uno visualmente, con paradas explícitas en lugar de conjeturas, lleva segundos, y como el generador funciona en esta pestaña, los experimentos de paleta permanecen privados hasta que el diseño se publica. La declaración copiada no necesita limpieza antes de entrar en una hoja de estilos.

Preguntas frecuentes

¿Por qué la vista previa dice REVISA LOS VALORES?
Se aplica una regla: la parada inicial debe ir antes de la parada final. Paradas iguales o invertidas hacen el degradado ambiguo, así que el mensaje nombra la regla y copiar y descargar esperan hasta que pasa. Mantener aunque sea un 1% entre las paradas es suficiente.
¿Qué hace Dirección / foco en el modo radial?
En un degradado radial el ángulo no rota nada: posiciona el foco del círculo en un anillo al 25% del centro, así que 0° empuja el foco a la derecha y 180° a la izquierda. Las coordenadas circle at X% Y% exportadas lo reflejan exactamente.
¿Qué ángulo da la dirección que quiero?
Los ángulos lineales siguen la convención CSS: 0deg mezcla hacia arriba, 90deg apunta a la derecha, 180deg hacia abajo y 270deg a la izquierda. Los 135deg predeterminados van de arriba a la izquierda a abajo a la derecha, una diagonal que favorece a la mayoría de las bandas hero.
¿Cómo hago una franja de corte duro?
La validación exige que la parada inicial vaya antes de la parada final, así que colócalas a un 1% de distancia — 49% y 50% para una costura centrada. La banda de transición colapsa a una línea fina, que se lee como una división bicolor nítida en cualquier elemento.
¿Puedo construir un degradado de tres colores?
El generador trabaja con dos paradas explícitas por diseño; eso es lo que cubren los controles y la validación. Tras copiar la declaración, añadir una parada intermedia a mano es una edición de una línea.
¿Se suben mis colores a algún sitio?
No. Todo se calcula en la pestaña actual del navegador sin cuenta, y ningún valor entra en almacenamiento, registros o analítica. Pulsa Restablecer para volver a la mezcla lineal predeterminada.

Continuar en Diseño

Tareas relacionadas, no un callejón sin salida.

Pasa a otro espacio de trabajo enfocado sin volver al índice completo.

Generador de animaciones de carga CSS

CSS Loader Generator

Diseña un anillo orbital o tres puntos que rebotan con marco, trazo, velocidad y colores ajustables, y copia el CSS con @keyframes y reduced-motion.

Crear

Generador de casillas CSS

CSS Checkbox Generator

Diseña casillas personalizadas sobre un input real —con estados de foco y desactivado incluidos— y copia el CSS con tus colores y su transición.

Crear

Generador de interruptores CSS

CSS Switch Generator

Diseña interruptores de CSS puro con pista, deslizador y colores de ambos estados ajustables, y copia el código con foco accesible y reduced-motion.

Crear

Generador de clip-path CSS

CSS Clip Path Generator

Edita polígonos arrastrando, con el teclado o mediante coordenadas. Usa cuatro formas predefinidas y copia una declaración clip-path o CSS completo de forma local.

Crear