Color Gradients

Developer
EOS
Size
1,827 Kb
Views
10,120
  1. Color Gradients Previews
  2. Color Gradients HTML Codes
  3. Color Gradients CSS Codes

How do I make an color gradients?

What is a color gradients? How do you make a color gradients? This script and codes were developed by EOS on 10 January 2023, Tuesday.

Color Gradients Previews
IQ Test

Color Gradients - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Color Gradients</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<h2>Hello World</h2><p> This is just a little test
</p>
<div id="grad1"></div>
<div id="grad2">try
</div>
</body
</body>
</html>

Color Gradients - Script Codes CSS Codes

body
{ width:100%; height:100%; background: linear-gradient(cadetblue,peachpuff,tan,#aa8877);
}
h2
{ font-family:Arial;
font-size:100px;
text-transform:uppercase;
color:peachpuff;
text-align:center;
}
p
{font-family: Arial;
color:cadetblue;
background: linear-gradient(thistle,tan);
width:50%;
margin-left:auto;
margin-right:auto;
text-align:center;
padding:15px;
}
#grad1
{
height:200px;
background: linear-gradient(60deg, azure, plum, gold); /* Standard syntax (must be last) */
margin:10px;
}
#grad2
{width:500px;
background: -webkit-linear-gradient(left,indianred, peachpuff ,thistle ); /* For Safari */
background: -o-linear-gradient(left,indianred, peachpuff,thistle); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left,indianred, peachpuff,thistle); /* For Firefox 3.6 to 15 */
background: linear-gradient(left, indianred, peachpuff,thistle); /* Standard syntax (must be last) */
margin-left:auto;
margin-right:auto;
padding:20px;
text-align:center;
text-transform:uppercase;
font-family:arial;
font-size:50px;
color:cadetblue;
}
#grad2:hover
{width:500px;
background: -webkit-linear-gradient(left,moccasin, darkkhaki ,gold ); /* For Safari */
background: -o-linear-gradient(left,moccasin, darkkhaki, gold); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left,moccasin, darkkhaki, gold); /* For Firefox 3.6 to 15 */
background: linear-gradient(left, moccasin, darkkhaki, gold); /* Standard syntax (must be last) */
margin-left:auto;
margin-right:auto;
padding:20px;
text-align:center;
text-transform:uppercase;
font-family:arial;
font-size:50px;
color:peachpuff;
}
Color Gradients - Script Codes
Color Gradients - Script Codes
Home Page Home
Developer EOS
Username aurumlux
Uploaded January 10, 2023
Rating 3
Size 1,827 Kb
Views 10,120
Do you need developer help for Color Gradients?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

EOS (aurumlux) Script Codes
Name
ZIRKUS
STELLA
STERN
Custom
Go top
HEXAGON
Hover effect
Css Triangles
Image hover
FLOWER HOVER
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!