Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Boy Buijsman
Boy Buijsman
13,773 Points
Posted by Boy Buijsman
Boy Buijsman
13,773 Points

CSS Gradients (advanced)

Hi Everyone, My first time on the forum. I am working on a website and fount a gradient i would like to use (the header of: http://www.sportingplus.nl/ ) Can anyone tell me how i can do this is CSS3.

Best i found is: linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

and then try and set the angle for each diffrent color line.

Any pointers will be appreciated

2 Answers

Eike Schuderer
Eike Schuderer
4,462 Points
Eike Schuderer
Eike Schuderer
4,462 Points

You can define multiple CSS gradients like this:

body {
  background-image:
    linear-gradient(45deg, green 25%, orange 50%, transparent 50%),
    linear-gradient(-45deg, blue 25%, red 50%, transparent 50%),
    linear-gradient(to bottom, steelblue 25%, lightblue 50%, transparent 50%);
}

I've made an example from the header, altough you have to experiment with the values: http://codepen.io/InitArt/pen/Dyrem

Boy Buijsman
Boy Buijsman
13,773 Points
Boy Buijsman
Boy Buijsman
13,773 Points

Thats something i can work with. Ill try and see if i can arc the bars a little. Thank you

Chris Shaw
Chris Shaw
26,662 Points
Chris Shaw
Chris Shaw
26,662 Points

Which part of the website are you talking about specifically as their header doesn't have any gradients, if you mean the background of the page then that's as simple as the below.

body {
    background-color: #fff;
    background-image: linear-gradient(to bottom, #000 0%, #fff 100%);
    background-repeat: no-repeat;
}

This doesn't include any of the browser prefixes which have slightly different syntax but you don't have to worry about that if you use something like Prefix free or Autoprefixer.