<

Go Premium for a chance to win a PS4. Enter to Win

x

Creating Gradients in CSS

Posted on
6,148 Points
48 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Join & Write a Comment

Suggested Videos

Title Views Activity
Using Google Font API in CSS 55
Introduction to jQuery (Part 1) 642
Lists and Links 82
Flexible Layouts 52
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month