Start networking and exchanging professional insights

Register now or log in to join your professional community.

Follow

How to set a linear gradient background for the <div> element (white, green) ?

user-image
Question added by mohamed ahmed mahmoud , مصمم مواقع انترنت web designer , conect
Date Posted: 2017/03/28
medhatmahmoud mahmoud
by medhatmahmoud mahmoud , Web Designer , Connect Computer Service Co

div {background: linear-gradiant(white, green);}

You can use,

div {   

background: white;/* For browsers that do not support gradients */   

background: -webkit-linear-gradient(white, green);/* For Safari5.1 to6.0 */   

background: -o-linear-gradient(white, green);/* For Opera.1 to.0 */ 

background: -moz-linear-gradient(white, green);/* For Firefox3.6 to */   

background: linear-gradient(white, green);/* Standard syntax */}

I hope it will help you.

Belal Al Hamdan
by Belal Al Hamdan , Web Developer , web developer & C omputerEngineer

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

    height: 200px;

    background: red; /* For browsers that do not support gradients */

    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */

    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */

    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */

    background: linear-gradient(red, yellow); /* Standard syntax (must be last) */

}

</style>

</head>

<body>

 

<h3>Linear Gradient - Top to Bottom</h3>

<p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p>

 

<div id="grad1"></div>

 

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

 

</body>

</html>

 

More Questions Like This