CSS Gradient Backgrounds

Follow the instructions below. You must actually read them!

Helpful code reference: https://www.w3schools.com/css/css3_gradients.asp

1. View gradient backgrounds on different websites

2. Create new Notepad++ page

  • Open Notepad++ and start a new webpage with opening and closing html, head, title, style, and body tags. Also add an h1 headline that says Happy Halloween!. Save it as cssgradient.html

3. Add a gradient background

  • Your very first gradient is a basic linear gradient that goes from the top to the bottom, with the second color, blue, last. First, add the body selector with opening and closing curly brackets { } inside of your style tags in your head section. Then add the following code background: linear-gradient(blue, red);

3a. CSS Comments!

  • We will comment out our CSS code as we go along so you can keep all of your gradient background work. Sample comment:
    body {
    /*background: linear-gradient(blue, red, yellow, green, pink);*/
    background: linear-gradient(to bottom right, orange, black);
    }

4. Linear gradient- change the colors

  • Change the order of your colors- make blue first and red second. What happens? Change the colors from red and blue to something else (get colors http://htmlcolorcodes.com/color-names/ ). Add a 3rd, 4th, and even 5th color. What happens?

4a. Linear gradient- subtle color change

  • Go to https://materialuicolors.co/  and pick a color you like. Then, choose 5 colors from that color to range from light to medium to dark. Example: background: linear-gradient(#FF7043, #FF8A65, #FFAB91, #FFCCBC, #FBE9E7);. This will create a gradient with a subtle color change.

5. Linear gradient- change the direction

  • Add background: linear-gradient(to right, orange, black); and try different colors as well as: to left, to bottom right, to bottom left, to top right, and to top left. Make a rainbow- background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

6. Linear gradient- change the angles

  • The basic vertical linear gradient is top to bottom, 180deg. Try background: linear-gradient(45deg, red, blue); and then change the angle to different numbers besides 45deg. Again, change the colors up! Try using colors that are close together (like different shades of blue) to see a more subtle gradient effect. Find colors: http://htmlcolorcodes.com/color-names/ .

7. Radial gradient- change the colors

  • Create your first radial gradient by adding background: radial-gradient(green, purple);. Try changing the colors and adding at least one more color to see what 3 colors together looks like.

7a. Radial gradient- change the colors

  • Create your first radial gradient by adding background: radial-gradient(green, purple);. Try changing the colors and adding at least one more color to see what 3 colors together looks like.

8. Radial gradient- subtle color change

  • Go to https://materialuicolors.co/  and pick a color you like. Then, choose 5 colors from that color to range from light to medium to dark. Example: background: radial-gradient(circle, #FBE9E7, #FFCCBC, #FFAB91, #FF8A65, #FF7043);. This will create a gradient with a subtle color change.

9. Radial gradient- change the amount of color

  • You can choose how much of each color you want background: radial-gradient(white 5%, yellow 15%, orange 60%);. Change the colors and the percentages to get different results.

10. Happy Halloween!

  • Create a gradient background with a spooky Halloween vibe. Choose any kind of gradient you want using the examples above. Style your h1 headline with CSS to give it a font-size, text-align, color, and font-family. Choose a Google Font . Don’t forget to add a text-shadow (text-shadow: 2px 2px black;) – just change the pixel values and color if you want.

Sample (you don’t have to make this exact design!)
happy halloween gradient

Answer code

  • Download, open, and save this  if you got stuck or need to review your code to find mistakes