CODEWITHSUNDEEP
htmlcsslinear-gradients
Viktor Carlson
Viktor Carlson

Reputation: 1008

Change the flow of colours in a CSS gradient

I use a <div class="menu"></div> and I set a background color with a gradient.

enter image description here

It floats from red in the top to white in the Bottom. Here is my .css code:

.menu {
    background-color: #FFF;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#791014), to(#FFF));
    background-image: -webkit-linear-gradient(top, #791014, #FFF);
    background-image: -moz-linear-gradient(top, #791014, #FFF);
    background-image: -ms-linear-gradient(top, #791014, #FFF);
    background-image: -o-linear-gradient(top, #791014, #FFF);
    background-image: linear-gradient(top, #791014, #FFF);
    clear: both;
}

I like the starting and end color. My question is, if there is a way that I can change how it flows from red (top) to white (bottom) For example that it switches very much earlier to white, so that I have the dark red at the beginning of the top but in the middle it is already much more white.

In other words, I want to change how fast it transitions from red to white.

Upvotes: 2

Views: 2765

Answers (2)

Harry
Harry

Reputation: 89790

If you want the transition between the colors to happen quicker than normal , just change the point by where the transition should be fully completed. When just two colors are given without any color-stop percentage then the first color starts at 0% and the in between colors are calculated such that second color is reached at 100% mark (100% = container's height by default or background-size in Y-axis if specified). Instead of that give a lower value for the white color. In the below snippet, I have given it as 60% and so the background reaches white color by the time it reaches 60% of the container's height.

Note:

  • 100% = Container's height (default) or background-size in Y-axis (if it is specified) for a vertical gradient.
  • 100% = Container's width (default) or background-size in X-axis (if it is specified) for horizontal gradient.

div {
  float: left;
  height: 100px;
  width: 200px;
  line-height: 100px;
  text-align: center;
  margin-right: 5px;
}
.menu-60 {
  background-color: #FFF;
  background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 60%);
  background-image: -moz-linear-gradient(top, #791014 0%, #FFF 60%);
  background-image: -ms-linear-gradient(top, #791014 0%, #FFF 60%);
  background-image: -o-linear-gradient(top, #791014 0%, #FFF 60%);
  background-image: linear-gradient(top, #791014 0%, #FFF 60%);
}
.menu-40 {
  background-color: #FFF;
  background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 40%);
  background-image: -moz-linear-gradient(top, #791014 0%, #FFF 40%);
  background-image: -ms-linear-gradient(top, #791014 0%, #FFF 40%);
  background-image: -o-linear-gradient(top, #791014 0%, #FFF 40%);
  background-image: linear-gradient(top, #791014 0%, #FFF 40%);
}
.menu-80 {
  background-color: #FFF;
  background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 80%);
  background-image: -moz-linear-gradient(top, #791014 0%, #FFF 80%);
  background-image: -ms-linear-gradient(top, #791014 0%, #FFF 80%);
  background-image: -o-linear-gradient(top, #791014 0%, #FFF 80%);
  background-image: linear-gradient(top, #791014 0%, #FFF 80%);
}
br {
  clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<h3>Red to White at 60%</h3>
<div class='menu-60'>Text</div>
<div class='menu-60'>Text</div>
<div class='menu-60'>Text</div>

<br/>

<h3>Red to White at 40%</h3>
<div class='menu-40'>Text</div>
<div class='menu-40'>Text</div>
<div class='menu-40'>Text</div>

<br/>

<h3>Red to White at 80%</h3>
<div class='menu-80'>Text</div>
<div class='menu-80'>Text</div>
<div class='menu-80'>Text</div>

Upvotes: 2

iamalismith
iamalismith

Reputation: 1571

You can use colour stops to achieve this like 

background: -moz-linear-gradient(top,  #791014 0%, #ffffff 28%); 
background: -webkit-linear-gradient(top,  #791014 0%,#ffffff 28%);    
background: linear-gradient(to bottom,  #791014 0%,#ffffff 28%);

You could use a tool like http://www.colorzilla.com/gradient-editor/ to easily tweak this visually and have the code generated for you.

http://colorzilla.com/gradient-editor/#791014+0,ffffff+28

Upvotes: 0

Related Questions