<

Creating Gradients in CSS

Posted on
6,154 Points
54 Views
1 Endorsement
Last Modified:
Experience Level: Beginner
4:19
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.

1
Comment
0 Comments

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Join & Write a Comment

Suggested Videos

Title Views Activity
Embedded Flash in HTML5 102
Introduction to jQuery (Part 1) 774
Introduction to jQuery (Part 2) 890
Lists and Links 102
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month