CSS Gradient Builder
Understand CSS Gradient Builder
Construye degradados CSS lineales, radiales y cónicos a partir de paradas de color, con vista previa en vivo y una declaración background lista para copiar.
How it works
Un degradado se dibuja a lo largo de una línea (lineal), hacia fuera desde un punto central (radial) o alrededor de un punto central (cónico), con cada parada de color fijada a un porcentaje de ese recorrido y los píxeles intermedios interpolados. Los ángulos de CSS para los degradados lineales se miden en sentido horario desde «to top», así que 0deg va de abajo arriba, 90deg de izquierda a derecha y 180deg de arriba abajo, la convención contraria a la que usan la mayoría de las herramientas de dibujo. La interpolación ocurre por defecto en sRGB, canal por canal, y por eso el punto medio entre azul y amarillo sale gris en lugar de verde.
When to use it
- Producir el fondo de una sección o de una cabecera sin escribir a mano la sintaxis de las paradas
- Construir una capa sutil de dos paradas para colocar texto sobre una imagen con seguridad
- Crear un degradado cónico para un anillo de progreso, un sector circular o una rueda de color
- Obtener el CSS exacto de un degradado que un diseñador especificó como un ángulo y dos valores hexadecimales
Watch out for
- Un degradado es una imagen, no un color. Se aplica sobre background-image, así que `background-color` sigue viéndose a través de cualquier transparencia y sigue siendo la alternativa si el degradado no llega a aplicarse: defina ambos.
- Dos tonos complementarios se interpolan pasando por el gris. Añada una parada intermedia en un tono situado entre ambos, o especifique un espacio de color de interpolación como `in oklch`, para que la transición se mantenga saturada.
- Los degradados grandes y de bajo contraste muestran bandas visibles. Ocho bits por canal no pueden expresar una rampa suave a lo largo de 1000 píxeles de color casi idéntico; añada una capa sutil de ruido o aumente la distancia entre colores.
- Las paradas en porcentaje son relativas a la línea del degradado, no al elemento, y la línea de un degradado lineal en ángulo es más larga que la caja. Una parada al 50 % no es el centro geométrico del elemento salvo que el ángulo sea de 0 o de 90 grados.
Frequently Asked Questions
¿Cómo se hace un fondo con degradado en CSS?
Use la propiedad background con una función de degradado: background: linear-gradient(135deg, #5C5BFE, #F2A03D). El primer argumento es el ángulo (0deg = de abajo arriba, 90deg = de izquierda a derecha). Use radial-gradient() para degradados circulares o conic-gradient() para angulares.
¿Cómo se añade un degradado lineal en CSS?
Añada background: linear-gradient(dirección, parada1, parada2, ...) a cualquier elemento. La dirección puede ser un ángulo (45deg) o una palabra clave (to right, to bottom right). Ejemplo: background: linear-gradient(to right, #667eea, #764ba2). Funciona en cualquier elemento de bloque.
¿Cómo se usa linear-gradient en CSS?
linear-gradient() crea una transición suave entre paradas de color a lo largo de una línea. Se usa en fondos de botones, secciones destacadas, capas sobre tarjetas y separadores diagonales. Apile varios degradados separándolos por comas para lograr efectos por capas. Este constructor devuelve la propiedad CSS lista para pegar.
How to Use CSS Gradient Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.