Paso 1
Elige el tipo de degradado
Utilice lineal para un desvanecimiento direccional, radial para un efecto de centro hacia afuera o cónico para un barrido alrededor de un origen.
Generador de degradados CSS gratuito en línea
Crea degradados lineales, radiales o cónicos con dos a seis paradas de color. Obtenga una vista previa del resultado en vivo, ajuste la dirección u origen relevante y copie CSS listo para usar sin iniciar sesión.
Banco de trabajo interactivo CSS
Construye el degradado
El color se detiene
De dos a seis paradas, mantenidas en orden de posición.
Detener 1
Ingrese un color opaco #RGB o #RRGGBB.
Detener 2
Ingrese un color opaco #RGB o #RRGGBB.
Detener 3
Ingrese un color opaco #RGB o #RRGGBB.
Preajustes
Vista previa en vivo
LinealCSS salida
.gradient-background {
background-color: #0F766E;
background-image: linear-gradient(135deg, #0F766E 0%, #F59E0B 52%, #172033 100%);
}La vista previa y ambas acciones de copia utilizan el mismo valor de gradiente generado.
Cómo crear un degradado CSS
Paso 2
Editar colores, paradas y dirección
Ingrese colores HEX válidos, coloque cada parada y ajuste el ángulo, la forma o el origen mostrado para el tipo seleccionado.
Paso 3
Vista previa y copia del CSS
Revise la superficie renderizada por el navegador, luego copie la regla completa o solo la función de degradado para su hoja de estilo.
Elija el tipo de degradado CSS correcto
Las tres funciones de gradiente CSS describen diferentes caminos a través de las mismas paradas de color ordenadas. Comience con la geometría que coincida con la superficie deseada.
Los degradados lineales siguen un eje
Un gradiente lineal se mueve a lo largo de una línea recta. En CSS, 0 grados apunta hacia arriba y los ángulos crecientes giran en el sentido de las agujas del reloj, por lo que 90 grados apunta hacia la derecha y 180 grados apunta hacia abajo.
Los gradientes radiales se expanden desde un origen
Un degradado radial crece hacia afuera como un círculo o elipse. Mueva su origen para colocar un foco cerca del centro, un borde o una esquina.
Degradados cónicos que barren alrededor de un punto
Un degradado cónico rota los colores alrededor de un origen. Funciona bien para barridos decorativos, pero un fondo CSS sin etiquetar no es un gráfico de datos accesible.
Control de paradas, posiciones y dirección del color
Color detiene los colores anclados en puntos exactos. Su orden y espaciado determinan dónde comienza, se acelera o se concentra cada transición.
Utilice de dos a seis colores opacos HEX
Escribe #RGB o #RRGGBB, o usa el selector de color nativo. Un borrador no válido no reemplaza el último color válido utilizado en la vista previa.
Mantenga las posiciones de parada predecibles
Las paradas permanecen en orden ascendente del 0% al 100%. Acerque las paradas vecinas para una transición más rápida o aléjelas para una combinación más larga.
Usar ajustes preestablecidos como puntos de partida
Todos los ajustes preestablecidos siguen siendo editables. Invierta el orden de los colores, genere nuevos colores o restablezca el degradado inicial sin recargar la página.
Usa el CSS generado en un diseño real
La regla copiada es intencionalmente pequeña: un retroceso sólido seguido del valor de gradiente exacto que se muestra en la vista previa.
Mantener un fondo sólido como respaldo
Coloque el color de fondo antes de la imagen de fondo para que quede un color sólido utilizable si la declaración de degradado no está disponible. Revise ese recurso también en contexto.
Aplicar el degradado como imagen de fondo
CSS los gradientes son valores de imagen. Utilice la función generada con una imagen de fondo o una taquigrafía de fondo, no como un valor de color de fondo.
Revisar tamaños reales de elementos
Un degradado CSS no tiene ancho ni alto natural; se representa al elemento al que se aplica. Pruébelo en tarjetas, botones, pancartas y tamaños responsivos reales.
Compruebe la legibilidad y conozca los límites
Una declaración de gradiente válida aún puede fallar en contexto. Revise el contraste, el significado y cada estado interactivo o de respuesta antes de enviarlo.
Texto de prueba en todo el degradado
El contraste puede cambiar de un lado de la superficie al otro. Pruebe el texto con las áreas relevantes menos favorables y vuelva a verificar el desplazamiento, el enfoque y los estados seleccionados.
No utilizar un gradiente como única señal de datos Las imágenes de fondo
CSS no proporcionan texto alternativo nativo. Agregue etiquetas, valores u otra representación accesible siempre que los colores comuniquen significado.
Sepa qué no se exporta
Este generador enfocado no crea colores alfa, degradados repetidos o en capas, espacios de interpolación personalizados, archivos de imagen ni clases específicas del marco.
Privacidad y límites
El editor se ejecuta en esta pestaña del navegador. No carga colores ni genera CSS, y no se requiere cuenta.
- • Colores opacos #RGB y #RRGGBB únicamente; sin controles alfa ni de opacidad.
- • Sin degradados de espacio de color personalizados, en capas, repetidos o en malla.
- • Copia estándar CSS solamente; sin imagen, SVG, Tailwind o CSS exportación de archivos.
Preguntas frecuentes
¿Este CSS generador de gradiente es de uso gratuito?
Sí. Puede crear, obtener una vista previa y copiar gradientes CSS sin registrarse, iniciar sesión ni desbloquear el resultado.
¿Qué tipos de gradiente CSS admite?
El generador admite gradiente lineal(), gradiente radial() y gradiente cónico(). Cada tipo muestra solo los controles que afectan su salida.
¿Cuántas paradas de color puedo agregar?
Puedes utilizar de dos a seis tonos de color opacos. Cada parada acepta la entrada #RGB o #RRGGBB y una posición del 0% al 100%.
¿Qué significan los ángulos de gradiente CSS?
Para gradientes lineales, 0 grados apunta hacia arriba, 90 grados apunta hacia la derecha, 180 grados apunta hacia abajo y 270 grados apunta hacia la izquierda. Los degradados cónicos utilizan el ángulo como rotación inicial alrededor del origen seleccionado.
¿Puedo cambiar el origen radial o cónico?
Sí. Los modos radial y cónico le permiten colocar el origen en el centro, un borde o una esquina. El modo radial también te permite elegir un círculo o una elipse.
¿Puedo copiar solo el valor del gradiente?
Sí. Copie la regla de clase completa cuando necesite un respaldo sólido, o copie solo la función de gradiente cuando la coloque en una declaración existente.
¿Por qué el CSS generado incluye un color de fondo sólido?
La línea de color de fondo proporciona un respaldo simple antes de que la imagen de fondo aplique el degradado. Revise ese color alternativo con cualquier texto o control colocado en él.
¿Esta herramienta admite colores transparentes u opacidad?
No. Esta versión acepta intencionalmente colores opacos #RGB y #RRGGBB únicamente. No genera gradientes de espacio de color alfa, repetidos, en capas o personalizados.
¿Son accesibles los fondos degradados de CSS?
Un degradado decorativo puede ser apropiado, pero los lectores de pantalla no anuncian las imágenes de fondo y el contraste puede variar en la superficie. No utilice un gradiente como única representación de datos significativos y pruebe el texto con las áreas relevantes menos favorables.
¿La herramienta carga o guarda mi degradado?
No se utiliza ningún servicio externo para el editor. Su configuración permanece en la pestaña actual del navegador y se restablece cuando se recarga la página.
Herramientas relacionadas
Continúa con otra herramienta basada en navegador.
Sd Herramientas de diseño gratuitas
Elegir y convertir colores
Selector de color
Elija un color visualmente o ingrese un valor HEX, luego ajuste RGB, HSL y opacidad. Obtenga una vista previa del resultado, compare tonos cercanos y copie el código de color exacto sin iniciar sesión.
Cd Herramientas de diseño gratuitas
Verificar contraste de color sólido
Comprobador de contraste de color
Pruebe el texto y los colores de fondo con WCAG 2.2 AA y AAA. Vea la relación de contraste exacta, obtenga una vista previa del tamaño y peso de fuente seleccionados e identifique si el par pasa.
Gd Herramientas de diseño gratuitas
Construye una sombra de cuadro CSS
Generador de sombras CSS
Crea sombras en capas CSS con hasta cuatro capas editables. Ajuste los desplazamientos, el desenfoque, la extensión, el color, la opacidad y el modo de inserción, obtenga una vista previa del resultado y copie el CSS sin iniciar sesión.
Od Herramientas de diseño gratuitas
Optimizar un gráfico SVG
Optimizador de SVG
Cargue o pegue el marcado SVG, optimícelo localmente con SVGO y compare el código, el tamaño del archivo y el resultado visual antes de descargarlo. No es necesario iniciar sesión ni cargar el servidor.