<

Watch Creating Gradients in CSS

Posted on
6,160 Points
60 Views
1 Endorsement
Last Modified:
Published
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
0 Comments

Suggested Videos

Title Views Activity
Box Shadow Effect in CSS 149
Introduction to jQuery (Part 1) 818
Lists and Links 104
Flexible Layouts 71
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month