html - para - ¿Cómo hacer que un gradiente css se detenga después de tantos píxeles?

gradient generator online

Question

-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent;

Tengo este código arriba y me di cuenta de que este gradiente va de arriba a abajo. ¿Hay alguna manera de hacer que detenga todo el gradiente después de 30px? Puedo hacer los ajustes necesarios, pero ¿cómo se pueden completar los gradientes después de 30px?

Answer 1

Bueno, siempre que el resto del degradado (después de la cantidad establecida de píxeles) pueda ser de un color fijo, solo use tres paradas de color como se indica a continuación (esto se detiene a 30px, observe que la última entrada es idéntica a la segunda):

background: linear-gradient(to bottom, rgba(90,90,90,0.75) 0%,rgba(0,0,0,0.75) 30px,rgba(0,0,0,0.75) 100%);

Answer 2

En CSS3:

radial-gradient(ellipse at center center, 
  rgb(30, 87, 153) 0%, rgb(41, 137, 216) 100px, 
  rgba(255, 255, 255, 0) 101px, rgba(255, 255, 255, 0) 100%) 

Puedes tener múltiples paradas en el gradiente. También puede especificar la longitud en píxeles en lugar de porcentajes. También puedes usar rgba para hacer colores transparentes.

Comienzas con tu primer color al 0%, el centro.
Luego tienes el segundo color en x píxeles (estoy usando x = 100 píxeles aquí).
Luego vas a blanco transparente a x + 1 píxeles.
Y mantente transparente hasta el 100%.

Esto debería funcionar en los navegadores compatibles con CSS3.

Answer 3

Los gradientes css3 son imágenes de fondo, por lo que llenarán todo el alto y el ancho del elemento de bloque, como si fuera un color sólido.

Para limitar la altura del degradado, limite la altura del elemento. Una forma "limpia" de hacer esto podría ser usar un pseudo elemento. Algo como...

div {height: 500px; width: 500px; position: relative}

div:before {
     content: " ";
     width: 100%;
     height: 30px;
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
     display: block;
     background-image: [your-gradient-here]
}

Answer 4

Puede utilizar la propiedad de tamaño de fondo juntos.

Me gusta esto:

    div {
        height:100px;
        background:-moz-radial-gradient(center, ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat;
        background-size:auto 30px;
    }