Linear Gradients with SVG
How do I make an linear gradients with svg?
What is a linear gradients with svg? How do you make a linear gradients with svg? This script and codes were developed by Benedikte Vanderweeën on 21 January 2023, Saturday.
Linear Gradients with SVG - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Linear Gradients with SVG</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--Gradient 1 Teal -->
<section> <div class="container"> <svg width="100%"> <defs> <linearGradient id="Bene-grad-1" x1="1" y1="0" x2="1" y2="1"> <stop offset="0%" stop-color="#52edc7" /> <stop offset="100%" stop-color="#5ac8fb" /> </linearGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#Bene-grad-1)" /> </svg> </div> <section> <!--Gradient 2 Blue-->
<section> <div class="container"> <svg width="100%"> <defs> <linearGradient id="Bene-grad-2" x1="1" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#1ad6fd" /> <stop offset="100%" stop-color="#1d62f0" /> </linearGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#Bene-grad-2)" /> </svg> </div> <section>
<!--Gradient 3 Yellow-->
<section> <div class="container"> <svg width="100%"> <defs> <linearGradient id="Bene-grad-3" x1="1" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#ffdb4c" /> <stop offset="100%" stop-color="#ffcd02" /> </linearGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#Bene-grad-3)" /> </svg> </div> <section>
<!--Gradient 4 Orange-->
<section> <div class="container"> <svg width="100%"> <defs> <linearGradient id="Bene-grad-4" x1="1" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#ff9500" /> <stop offset="100%" stop-color="#ff5e3a" /> </linearGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#Bene-grad-4)" /> </svg> </div> <section> <!--Gradient 5 Red -->
<section> <div class="container"> <svg width="100%"> <defs> <linearGradient id="Bene-grad-5" x1="1" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#ff5e3a" /> <stop offset="100%" stop-color="#ff2a68" /> </linearGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#Bene-grad-5)" /> </svg> </div> <section>
<!--Gradient 6 Violet -->
<section> <div class="container"> <svg width="100%"> <defs> <linearGradient id="Bene-grad-6" x1="1" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#c644fc" /> <stop offset="100%" stop-color="#5856d6" /> </linearGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#Bene-grad-6)" /> </svg> </div> <section>
<!--Gradient 7 Magenta -->
<section> <div class="container"> <svg width="100%"> <defs> <linearGradient id="Bene-grad-7" x1="1" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#ef4db6" /> <stop offset="100%" stop-color="#c643fc" /> </linearGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#Bene-grad-7)" /> </svg> </div> <section>
<!--Gradient 8 Green -->
<section> <div class="container"> <svg width="100%"> <defs> <linearGradient id="Bene-grad-8" x1="1" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#87fc70" /> <stop offset="100%" stop-color="#0bd318" /> </linearGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#Bene-grad-8)" /> </svg> </div> <section>
<!--Gradient 9 Silver -->
<section> <div class="container"> <svg width="100%"> <defs> <linearGradient id="Bene-grad-9" x1="1" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#dbddde" /> <stop offset="100%" stop-color="#898c90" /> </linearGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#Bene-grad-9)" /> </svg> </div> <section> <!--Gradient 10 Black -->
<section> <div class="container"> <svg width="100%"> <defs> <linearGradient id="Bene-grad-10" x1="1" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#4a4a4a" /> <stop offset="100%" stop-color="#2b2b2b" /> </linearGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#Bene-grad-10)" /> </svg> </div> <section>
</body>
</html>
Linear Gradients with SVG - Script Codes CSS Codes
section { height: 400px;
}
.container { margin: 0 auto;
}
Developer | Benedikte Vanderweeën |
Username | Benedikte |
Uploaded | January 21, 2023 |
Rating | 3 |
Size | 2,011 Kb |
Views | 2,024 |
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!
Name | Size |
Illustrio interface | 22,962 Kb |
Transparent SVG pattern | 1,453 Kb |
Drifting Clouds | 2,247 Kb |
SVG Logo | 2,374 Kb |
Donut graph animation | 2,333 Kb |
Background SVG Gradients | 1,748 Kb |
Rotating earth with people | 5,790 Kb |
Swimming fish | 2,446 Kb |
Europe | 15,962 Kb |
Sun Animation | 1,879 Kb |
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!
Name | Username | Size |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
See Through | Larrygeams | 77,410 Kb |
Transition | Shayhowe | 1,632 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
STAR WARS LIGHTSABER | Francoiscoron | 4,420 Kb |
Prism | Pyrografix | 2,843 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!