Are "Top" and "To Top" the Same Direction for Linear Gradients

Multiple linear gradients left top directions

Thanks to Ilya Streltsyn I solved the problem.

The thing is, when using gradients, the order of the code is important. So basically will work:

background: 
    -webkit-linear-gradient( top,white 0%, white 5%, transparent 5%, transparent 95%,white 95%, white 100%),
    -webkit-linear-gradient( left,white 0%, white 5%, red 5%, red  95%,white 95%, white 100%);

}

Codepen here

CSS3 with linear gradient for two directions

You could add more linear-gradients by separating them with a comma ,.

background: <linear-gradient>, <linear-gradient>,...

#top-header {  position: absolute;  bottom: 0;  left: 0;  width: 100%;  height: 100px;  z-index: 99999;  background: -webkit-gradient(linear, left top, right top, color-stop(100%, #be2e26), color-stop(20%, #be2e26), color-stop(20%, rgba(22, 22, 22, 0)), color-stop(20%, rgba(22, 22, 22, 0))), -webkit-gradient(linear, right top, top top, color-stop(100%, #be2e26), color-stop(20%, #be2e26), color-stop(20%, rgba(22, 22, 22, 0)), color-stop(20%, rgba(22, 22, 22, 0)));  background: -webkit-linear-gradient(left, #be2e26 100%, #be2e26 40%, rgba(22, 22, 22, 100) 100%, rgba(22, 22, 22, 100) 100%), linear-gradient(to left, #be2e26 30%, #be2e26 20%, rgba(22, 22, 22, 0) 50%, rgba(22, 22, 22, 0) 100%);  background: linear-gradient(to right, #be2e26 30%, #be2e26 20%, rgba(22, 22, 22, 0) 50%, rgba(22, 22, 22, 0) 100%), linear-gradient(to left, #be2e26 30%, #be2e26 20%, rgba(22, 22, 22, 0) 50%, rgba(22, 22, 22, 0) 100%);  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#be2e26', endColorstr='#be2e26', GradientType=1);  -webkit-transition: all 0.3s;  transition: all 0.3s;}

<header id="top-header"></header>

How do I change the direction of a gradient in tailwind css?

But it's a linear gradient, I want a vertical gradient.

linear is a type of gradient, vertical is a direction. You probably meant that you have horizontal gradient and you want vertical. They would both be linear though.

All default available directions that you can use for linear gradient:

bg-gradient-to-t
bg-gradient-to-tr
bg-gradient-to-r
bg-gradient-to-br
bg-gradient-to-b
bg-gradient-to-bl
bg-gradient-to-l
bg-gradient-to-tl

So for vertical direction just use bg-gradient-to-t (from bottom to top) or bg-gradient-to-b (from top to bottom)

More info in the docs

How to get the gradient color from top right to bottom left corner

Use to top right keyword for directing gradient to move from bottom left corner to top right corner.

background: linear-gradient(to top right, #2F2727, #1a82f7);
Use line-height equal to height.

More Information about css gradient is here.

div{  width:100px;  height:100px;  background: linear-gradient(to top right, #2F2727, #1a82f7);  border-radius:4px;}div p{  color:white;  text-align:center;  text-transform:uppercase;  font-weight:bold;  font-size:42px;  line-height: 100px;}

<div> <p>   b </p></div>

Value Error : background-image bottom is not a color value )

Your unprefixed linear-gradient() syntax needs to be updated to match the latest spec, which has a different syntax for specifying the direction:

background-image: linear-gradient(to top, rgb(42,112,166) 21%, rgb(66,136,190) 61%);

Note that to top does in fact replace bottom, even though it's the opposite direction. See this answer for an explanation.

As for the prefixed values, don't worry about them: they are non-standard and therefore cannot be validated.

Adding horizontal and vertical fading gradients on an element

You can use multiple gradient to simulate this:

body {  height:100vh;  margin:0;  background:   linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0)),   linear-gradient(to right,black,white);}

Change just the direction of gradient on hover

Just switch places of colors inside linear-gradient property.

   .button-1:hover {
        background-image: linear-gradient(#1a7b09 20%, #299c0f 80%);
    }

http://jsfiddle.net/EkYE5/1/