Creating Gradients in CSS

Posted on
6,159 Points
1 Endorsement
Last Modified:
Experience Level: Beginner
In this tutorial viewers will learn how to define a gradient in CSS.

Video Steps

1. Create a new HTML document with an internal stylesheet.

2. Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you specify a direction and start and end colors.

3. Create a new div in CSS and name it Gradient2. Define the background as "linear-gradient(45deg, #ee3668, black, rgba(255,0,0,1))" This is an example of multiple color stops and transparency.

4. Create a new div in CSS and name it Gradient3. Define the background as "radial-gradient(#ee3668 10%, white 45%, black)". Ensure you specify colors and percentages. This is an example of a radial gradient with defined color stops.

5. Style the h1 element to be white text.

6. In the HTML, type the tag for the Gradient div. Inside the Gradient div, type some text inside an h1 tag. Do the same for the other divs.

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month