4

Quiero formar una especie de barra de progreso que va degradando el color principal.

Empezando desde el rojo, hasta un rojo muy claro y finalmente el blanco.

una cosa así

introducir la descripción de la imagen aquí

Imaginad que el amarillo es un rojo clarito (no se hacerlo con paint.)

El caso que tengo en mi html:

.rojo{
  width:600px;
  height: 200px;
  background-color:#F54021;
  background:linear-gradient(left, #F54021, 60%, #D95030, 30%, white , 10%);
}
<div class="rojo">
</div>

El problema al ejecutar que toda la barra es de color rojo, no hace ningún degradado y también me he dado cuenta que sólo coge esta línea

background-color:#F54021;

Si pongo negro o azul o lo que sea va a ser el color final de la barra...

Edito: El degradado va desde la parte de la izquierda a la derecha.

Gracias

5
  • No conozco mucho el degradado, pero hace poco tuve que realizar este espero que te sea de ayuda Commented el 2 dic. 2019 a las 14:01
  • El problema es que eso va desde el centro.
    – EduBw
    Commented el 2 dic. 2019 a las 14:02
  • He editado el fiddle a ver si es lo que quieres Commented el 2 dic. 2019 a las 14:03
  • Estoy cambiando el circle at center por left, porque quiero que empiece por la izquierda y deja de funcionar DX
    – EduBw
    Commented el 2 dic. 2019 a las 14:05
  • 1
    Existen "gradient generators" que de manera visual puedes crear el gradiente que quieres y te devuelve el código css. Ejemplo: Gradient editor
    – x3k
    Commented el 2 dic. 2019 a las 14:13

3 respuestas 3

6

Como te he puesto en el comentario hoy en día es fácil encontrar alguna herramienta/web con la que podemos crear de manera visual (en este caso un degradado para luego obtener el CSS, se pueden encontrar por "css gradient generator". (También existen otros muy comunes que son para las sombras "css shadow generator").

El generador te devolverá varios css para que sea compatible con distintos navegadores.


linear-gradient

Esta respuesta esta basada en la funcion CSS linear-gradient() y tambien puedes ver compatibilidad con navegadores

linear-gradient([<angle> | to <side-or-corner> ,]? <color-stop>[[<stop-position]] [,<color-stop>[<stop-position]])

Para tu ejemplo el código mas simple sería:

background: linear-gradient(to right, red, white);

Las color-stop o paradas de color son opcionales por lo que podemos tener 2 (menos no tiene sentido en un degradado) o n. Del mismo modo las stop-position o posicion de la parada también son opcionales. La primera y la última parada toman como valores por defecto 0% y 100%, y el resto toman como valor por defecto la mitad entre la anterior parada y la siguiente (parada|parada|parada)==(0%|50%|100%)

Que es lo mismo que:

background: linear-gradient(90deg, red 0%, white 100%);

.rojo{
    width: 100%;
    height: 200px;
    background: linear-gradient(to right, red, white);
}
<div class="rojo">
</div>

4

Esto es un ejemplo del degradado, aplícalo a tu proyecto

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; 
  background-image: linear-gradient(to right, #FF0000, #FF3633, #FE615E);     }
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

;

3
  • Funciona lo tuyo, pero si pongo to right, #FF0000 , 60%, #FF3633, 30%, #FE615E, 10%); Para que apartir del 60% empiece a degradarse y el último tramo del 10% sea blanco, no funciona.
    – EduBw
    Commented el 2 dic. 2019 a las 14:41
  • Parece que solo poniendo un "%" si funciona (por ejemplo background-image: linear-gradient(to right, #FF0000,60% #FF3633, #FE615E);, prueba jugando con eso, si no te vale, buscamos otra solución
    – Lucía
    Commented el 2 dic. 2019 a las 14:50
  • 1
    bueno gracias, ya me las apaño con esto :)
    – EduBw
    Commented el 2 dic. 2019 a las 14:54
3

Los argumentos de linear-gradient están mal, por lo que el navegador ignorará toda la línea background-image. Si estuviera bien, la definición background-color sería innecesaria.

El modo correcto es:

.rojo {
  width:600px;
  height: 200px;
  /* background-color:#F54021; */
  background-image: linear-gradient(to right, #F54021, #D95030 60%, white 100%);
}
<div class="rojo"></div>

En linea-gradient, primero va la dirección (to right). Luego el color de inicio (#F54021), seguido de los color stoppers. #D95030 60% indica que el degradado se hace #D95030 al llegar al 60% del recorrido. Observa que se separa con un espacio, no con comas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.