Tips and Snips: Creative Website Hacks for Creative People
ImageandAspect
About
Work Examples
Contact
Privacy
Terms
Subscribe
Tips and Snips: Creative Website Hacks for Creative People
  • ImageandAspect
  • About
  • Work Examples
  • Contact
  • Privacy
  • Terms
  • Subscribe
Browsing Tag
css
CSS

How to make gradient backgrounds in CSS

Photo of a Gradient Image in shades of aqua and blue
June 20, 2020 by Diane Metcalf, M.S.I.T. No Comments

Gradient backgrounds are a visually striking way to display a pleasing transition of colors.

Here’s an example of the gradient background on each of my website’s pages, with shades of aqua and purple.

Here’s how I did it:

First of all, you need to know that CSS defines two kinds of gradients:

  • Linear Gradients (down/up/left/right/diagonally)
  • Radial Gradients (defined by their center)

I’m only focusing on linear gradients in this post.

Before you create the linear gradient, you need to decide two things:

  • What colors you will use. Those are your “color stops.”
  • The starting point and direction of  your gradient. (Do you want the colors to go left-right? Up-down? Angled from corner to corner?)

TYPES OF GRADIENTS

Top to Bottom (the default)

Create a div. Inside this div, your selector will be “background” and its’ property will be “linear-gradient”. The value of “linear-gradient” will be the color stops.

I use hex values for my color stops to have more control over the exact shades. Here’s a resource for finding hex codes:

Here’s the default syntax:

#mydiv {
background: linear-gradient(blue, green);
}

It’s actually pretty straightforward, huh?

Now we can try some other kinds of transitions:

Left-right, transitioning from blue to green:

#mydiv {
background: linear-gradient(to right, blue , green);
}

Diagonally:

You can make the gradient display diagonally by indicating the horizontal and vertical starting positions:

#mydiv {
background: linear-gradient(to bottom right, blue, green);
}

Angled: (to top, to bottom, to left, to right, to bottom right, etc.)

The angle is specified by degrees between the horizontal line and the gradient line:

#mydiv {
background: linear-gradient(-90deg, blue, green);
}

Top-bottom, transitioning from blue to green to orange:

#mydiv {
background: linear-gradient(blue, green, orange);
}

My own gradient background goes left to right, and I specified that I wanted the first color to take up the first 50% of the gradient space.

Here’s my code:

background: linear-gradient(to right, #57BBBF 50% , #5798bf, #577dbf, #5759bf, #6f57bf, #9457bf, #da5cdb);

You can add transparency, by using the “rgba() function” to define the color stops. To define the amount of opacity or transparency, the last value in the function is  either a 0 or 1. (0 indicates full transparency, 1 indicates no transparency (fully opaque).

This next gradient starts from the left as fully transparent, then transitions to full opaque (non-transparent) blue:

#mydiv {
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

I hope you try some of these yourself and get creative, and have fun with them. There’s no limit to what you can do with gradients.

Questions? Contact me:

[email protected]

or

My Contact Page

Other articles you might like:

-6 Tips to Make Your Blog Post SEO Friendly

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

 

About the author

diane-author-300x181 How to make gradient backgrounds in CSS

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 3 min
Page 2 of 2«12

Find Topics

 Image and Aspect is a solution-based web presence development service for creatives, entrepreneurs and solopreneurs. We create impactful online presences that showcase your talents, skills, values & style, while focusing on influencing, engagement & connection.

 

It’s a collaborative process; we use streamlined project-management & communications tools so you’ll always know what’s happening with your project. And by adding personalized service, you get  one-on-one support. We want you to feel equipped, educated & empowered to ask questions & make decisions about your web presence & web platform.

 

Tips and Snips was born from the desire to give back; to support anyone who has an interest in learning the art and science of  web design and coding.

 

Thanks for your interest!

~Diane Metcalf, MS

Image and Aspect logo

Connect with me on Twitter!

Follow @MetcalfDiane

Categories

  • bootstrap
  • CSS
  • Design
  • Entrepreneurs and Creatives
  • HTML
  • Marketing
  • security
  • SEO
  • Thoughts
  • WordPress

Recent Posts

  • 6 Tips to make your Blog Post SEO Friendly May 6, 2022
  • The correct order for using Bootstrap tags April 4, 2022
  • Basic HTML (Hypertext Markup Language) Vocabulary Rules March 4, 2022
  • How to make a hover-able drop-down menu February 23, 2022
  • 10 things to do after creating your site January 8, 2022

Older Posts

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020

Tags

  • bootstrap
  • CSS
  • Design
  • Entrepreneurs and Creatives
  • HTML
  • Marketing
  • security
  • SEO
  • Thoughts
  • WordPress

Image and Aspect on Instagram

To see the Instagram feed you need to add your own API Token to the Instagram Options page of our plugin.
Oops, something is wrong. Instagram feed not loaded

recent posts

  • 6 Tips to make your Blog Post SEO Friendly
  • The correct order for using Bootstrap tags
  • Basic HTML (Hypertext Markup Language) Vocabulary Rules
  • How to make a hover-able drop-down menu
  • 10 things to do after creating your site

ImageAndAspect.com © 2021 Designed by ImageandAspect