Creador de Degradados - Editor Visual de Degradados CSS

Diseña degradados lineales y radiales visualmente. Añade paradas de color, ajusta ángulos, previsualiza en vivo y copia el CSS. gratis.

색상 중지점

  

프리셋

복사됨!
🔮 Descubre tu personaje del destino K-pop 🎨 도툰 — 웹툰·일러스트 플랫폼

¿Qué es un Creador de Degradados?

Un creador de degradados es un editor visual para crear degradados CSS. En lugar de escribir el código del degradado manualmente, eliges colores, estableces posiciones y ajustas ángulos; la herramienta genera el CSS en tiempo real. Admite tanto degradados lineales (con control de ángulo) como degradados radiales (con control de punto central), lo que facilita la creación de transiciones de color suaves para fondos, botones y elementos de la interfaz de usuario.

Cómo Crear un Degradado CSS

  1. Elige el tipo — Selecciona degradado Lineal o Radial
  2. Establece la dirección — Ajusta el ángulo (lineal) o el punto central (radial)
  3. Edita las paradas de color — Cambia los colores y arrastra los controles deslizantes de posición
  4. Añade más paradas — Haz clic en "+ Añadir Parada" para degradados complejos (hasta 8)
  5. Copia el CSS — Haz clic en el botón Copiar para obtener el código CSS

¿Por qué Usar Este Creador de Degradados?

  • Editor Visual — Ve cómo se actualiza tu degradado en tiempo real a medida que lo ajustas
  • Lineal y Radial — Ambos tipos de degradado con control total
  • Múltiples Paradas — Añade hasta 8 paradas de color para degradados complejos
  • Preestablecidos — 8 degradados preestablecidos hermosos para comenzar
  • CSS con Un Clic — Copia el código CSS listo para producción al instante

FreeToolbox vs Otras Herramientas de Degradado

CaracterísticaFreeToolboxcssgradient.ioWebGradients
Vista Previa en VivoSolo estática
Paradas de ColorHasta 8Ilimitado2 (fijo)
Soporte RadialNo
Preestablecidos8Ninguno180
AnunciosMínimosModeradosMínimos

Preguntas frecuentes

¿Cuál es la diferencia entre los degradados lineales y radiales?

Los degradados lineales hacen la transición a lo largo de una línea recta en un ángulo específico. Los degradados radiales hacen la transición hacia afuera desde un punto central en una forma circular o elíptica.

¿Cuántas paradas de color puedo añadir?

Hasta 8 paradas de color. Necesitas al menos 2 paradas para formar un degradado. Haz clic en '+ Añadir Parada' para añadir más.

¿Puedo eliminar una parada de color?

Sí. Haz clic en el botón × junto a cualquier parada para eliminarla, siempre y cuando queden al menos 2 paradas.

¿Cómo uso los preestablecidos?

Haz clic en cualquier miniatura preestablecida en la parte inferior. Carga los colores preestablecidos y establece el tipo de degradado en lineal a 135°. Luego puedes personalizarlo aún más.

¿Esto genera CSS compatible con todos los navegadores?

El CSS generado utiliza la sintaxis de degradado estándar admitida por todos los navegadores modernos (Chrome, Firefox, Safari, Edge). No se necesitan prefijos de proveedor.