Linear Gradient Background Color

Developer
Alen
Size
2,128 Kb
Views
42,504
  1. Linear Gradient Background Color Previews
  2. Linear Gradient Background Color HTML Codes
  3. Linear Gradient Background Color CSS Codes

How do I make an linear gradient background color?

Simple code for Linear Gradient Background. What is a linear gradient background color? How do you make a linear gradient background color? This script and codes were developed by Alen on 07 September 2022, Wednesday.

Linear Gradient Background Color Previews
IQ Test

Linear Gradient Background Color - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Linear Gradient Background Color</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main">
<div class="trans-top"> Lorem ipsum dolor sit amet, ex qui oblique ornatus nominati, ea habeo rebum cum. Te audire salutandi duo. Ei eos atqui liber deseruisse, mutat munere pri cu, cu mei odio munere incorrupte. Ne mollis inciderint nec, vis eu iisque quaeque. Eros novum vel in, his alia torquatos similique cu. Minim copiosae nec ad, decore veritus accusam eos ad, id tibique lucilius nec. Vel in mazim alienum periculis, omittam mentitum mea ea. Cu graecis oporteat est, mea suscipit maiestatis ei. Singulis corrumpit in per, cu has repudiare disputationi. Eos ei vidit tibique accusam.
</div>
<br/>
<div class="trans-left"> Lorem ipsum dolor sit amet, ex qui oblique ornatus nominati, ea habeo rebum cum. Te audire salutandi duo. Ei eos atqui liber deseruisse, mutat munere pri cu, cu mei odio munere incorrupte. Ne mollis inciderint nec, vis eu iisque quaeque. Eros novum vel in, his alia torquatos similique cu. Minim copiosae nec ad, decore veritus accusam eos ad, id tibique lucilius nec. Vel in mazim alienum periculis, omittam mentitum mea ea. Cu graecis oporteat est, mea suscipit maiestatis ei. Singulis corrumpit in per, cu has repudiare disputationi. Eos ei vidit tibique accusam.
</div>
<br/>
<div class="trans-right"> Lorem ipsum dolor sit amet, ex qui oblique ornatus nominati, ea habeo rebum cum. Te audire salutandi duo. Ei eos atqui liber deseruisse, mutat munere pri cu, cu mei odio munere incorrupte. Ne mollis inciderint nec, vis eu iisque quaeque. Eros novum vel in, his alia torquatos similique cu. Minim copiosae nec ad, decore veritus accusam eos ad, id tibique lucilius nec. Vel in mazim alienum periculis, omittam mentitum mea ea. Cu graecis oporteat est, mea suscipit maiestatis ei. Singulis corrumpit in per, cu has repudiare disputationi. Eos ei vidit tibique accusam.
</div>
</div>
<div style="background-color: red;text-align: center; border: 5px solid blue; width: 50px; height: 50px; -webkit-border-radius: 50%; border-radius: 50%; color: #fff; font-size: 40px;"> 1
</div>
<div style="background-color: red;text-align: center; border: 5px solid blue; width: 50px; height: 50px; -webkit-border-radius: 50%; border-radius: 50%; color: #fff; font-size: 40px;"> 1
</div>
</body>
</html>

Linear Gradient Background Color - Script Codes CSS Codes

.main{ background-color: #fff; color: #000;
}
div.trans-top{ background: linear-gradient(to top, rgba(255,255,255,0) 0%,rgba(111,33,5,0.8) 50%); padding: 20px; animation: mk_right_to_left 0.6s 1 cubic-bezier(0.77, 0, 0.175, 1); -webkit-animation: mk_right_to_left 0.6s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
.trans-left{ background: linear-gradient(to left, rgba(255,255,255,0) 0%,rgba(33,111,15,0.2) 100%); padding: 20px;
}
.trans-right{ background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(16,55,105,0.3) 100%); padding: 20px;
}
Linear Gradient Background Color - Script Codes
Linear Gradient Background Color - Script Codes
Home Page Home
Developer Alen
Username Alen
Uploaded September 07, 2022
Rating 3
Size 2,128 Kb
Views 42,504
Do you need developer help for Linear Gradient Background Color?

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!

Alen (Alen) Script Codes
Name
Simple Form in Table Layout
Arrow
3 Circle Venn Diagram
A Pen by Alen
Sidebar Form
Menu Innerpage Sample
Pure HTML 5 Basic
CSS Hover Effects
Flip Effect
Ribbon CSS
Create amazing web content 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!