2 replies [Last post]
Mend
Mend's picture
Offline
newbie
Last seen: 10 years 15 weeks ago
Timezone: GMT+1
Joined: 2011-02-21
Posts: 9
Points: 11

Hello again,

I was looking for a way to create a background gradient for my website. I'd like to have a gradient that basically starts from the top end 'reaches' the right color in the middle. Then, on it's way down, it will change back to the darker color, basically highlighting the most important parts of my website. This doesn't have to be very accurate and I'll be glad to experiment with the length of the gradients. However, I'm not sure where to begin. I have found plenty of gradient tutorials, but none of them explains how to get the gradient to go from dark to light, and then, downwards, go back to dark again.

What is the best way to do this, and does anyone have an example of this?

Kind regards,
Mend

ns8814
ns8814's picture
Offline
newbie
Last seen: 10 years 15 weeks ago
Timezone: GMT-5
Joined: 2011-02-23
Posts: 3
Points: 4

do you have access to photoshop

This is fairly simple to do in photoshop. Perhaps if you post a link I can make a quick gradient for you. They have a tool in photoshop that will do exactly what you desire. It will depend on the layout of your website though how you will set it up. You would want to set your background containers up so that it will automatically adjust based on the amount of content on your site. Unless you are sure that your page will always be the same size. you could also just duplicate the gradient that you have and rotate it 90 degrees like a mirror image. There are a lot of ways to go about it. I usually just make the gradient in photoshop using black and a shade of grey. This way you can lower the transparency to like 20% and change the color of the gradient by using a different background color in you CSS So you can go from a dark blue to light blue gradient to a dark red to light red gradient with a simple click.

Mend
Mend's picture
Offline
newbie
Last seen: 10 years 15 weeks ago
Timezone: GMT+1
Joined: 2011-02-21
Posts: 9
Points: 11

ns8814 wrote: This is fairly

ns8814 wrote:

This is fairly simple to do in photoshop. Perhaps if you post a link I can make a quick gradient for you. They have a tool in photoshop that will do exactly what you desire. It will depend on the layout of your website though how you will set it up. You would want to set your background containers up so that it will automatically adjust based on the amount of content on your site. Unless you are sure that your page will always be the same size. you could also just duplicate the gradient that you have and rotate it 90 degrees like a mirror image. There are a lot of ways to go about it. I usually just make the gradient in photoshop using black and a shade of grey. This way you can lower the transparency to like 20% and change the color of the gradient by using a different background color in you CSS So you can go from a dark blue to light blue gradient to a dark red to light red gradient with a simple click.

Thanks. I've sent you a message.