Flat UI Color Gradients

Developer
Krishna Babu
Size
1,821 Kb
Views
4,048
  1. Flat UI Color Gradients Previews
  2. Flat UI Color Gradients HTML Codes
  3. Flat UI Color Gradients CSS Codes

How do I make an flat ui color gradients?

I am using some flat color which are currently using in modern flat web-design.. What is a flat ui color gradients? How do you make a flat ui color gradients? This script and codes were developed by Krishna Babu on 11 January 2023, Wednesday.

Flat UI Color Gradients Previews
IQ Test

Flat UI Color Gradients - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat UI Color Gradients</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="flat-color-box flat-color-gradient-1"></div>
<div class="flat-color-box flat-color-gradient-2"></div>
<div class="flat-color-box flat-color-gradient-3"></div>
<div class="flat-color-box flat-color-gradient-4"></div>
<div class="flat-color-box flat-color-gradient-5"></div>
<div class="flat-color-box flat-color-gradient-6"></div>
<div class="flat-color-box flat-color-gradient-7"></div>
<div class="flat-color-box flat-color-gradient-8"></div>
<div class="flat-color-box flat-color-gradient-9"></div>
<div class="flat-color-box flat-color-gradient-10"></div>
<div class="flat-color-box flat-color-gradient-11"></div>
<div class="flat-color-box flat-color-gradient-12"></div>
<div class="flat-color-box flat-color-gradient-13"></div>
<div class="flat-color-box flat-color-gradient-14"></div>
<div class="flat-color-box flat-color-gradient-15"></div>
<div class="flat-color-box flat-color-gradient-16"></div>
<div class="flat-color-box flat-color-gradient-17"></div>
<div class="flat-color-box flat-color-gradient-18"></div>
<div class="flat-color-box flat-color-gradient-19"></div>
<div class="flat-color-box flat-color-gradient-20"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Flat UI Color Gradients - Script Codes CSS Codes

body{background-color:#000;}
.flat-color-box{ width:5%; height:800px; float:left;
}
.flat-color-gradient-1{background-image:linear-gradient(to bottom, transparent, #1abc9c);}
.flat-color-gradient-2{background-image:linear-gradient(to top, transparent, #2ecc71);}
.flat-color-gradient-3{background-image:linear-gradient(to bottom, transparent, #3498db);}
.flat-color-gradient-4{background-image:linear-gradient(to top, transparent, #9b59b6);}
.flat-color-gradient-5{background-image:linear-gradient(to bottom, transparent, #34495e);}
.flat-color-gradient-6{background-image:linear-gradient(to top, transparent, #16a085);}
.flat-color-gradient-7{background-image:linear-gradient(to bottom, transparent, #27ae60);}
.flat-color-gradient-8{background-image:linear-gradient(to top, transparent, #2980b9);}
.flat-color-gradient-9{background-image:linear-gradient(to bottom, transparent, #8e44ad);}
.flat-color-gradient-10{background-image:linear-gradient(to top, transparent, #2c3e50);}
.flat-color-gradient-11{background-image:linear-gradient(to bottom, transparent, #f1c40f);}
.flat-color-gradient-12{background-image:linear-gradient(to top, transparent, #e67e22);}
.flat-color-gradient-13{background-image:linear-gradient(to bottom, transparent, #e74c3c);}
.flat-color-gradient-14{background-image:linear-gradient(to top, transparent, #ffffff);}
.flat-color-gradient-15{background-image:linear-gradient(to bottom, transparent, #95a5a6);}
.flat-color-gradient-16{background-image:linear-gradient(to top, transparent, #f39c12);}
.flat-color-gradient-17{background-image:linear-gradient(to bottom, transparent, #d35400);}
.flat-color-gradient-18{background-image:linear-gradient(to top, transparent, #c0392b);}
.flat-color-gradient-19{background-image:linear-gradient(to bottom, transparent, #bdc3c7);}
.flat-color-gradient-20{background-image:linear-gradient(to top, transparent, #7f8c8d);}
Flat UI Color Gradients - Script Codes
Flat UI Color Gradients - Script Codes
Home Page Home
Developer Krishna Babu
Username krishnab
Uploaded January 11, 2023
Rating 4
Size 1,821 Kb
Views 4,048
Do you need developer help for Flat UI 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!

Krishna Babu (krishnab) Script Codes
Name
Wipe slider
Background
Concentration Game
AngularJs Combobox
Css3 shapes
Image Swaping
Page
Justify Horizontal Menu
No effect slideshow
Fade out slideshow
Create amazing video scripts 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!