Background SVG Gradients

SVG Gradients used as background for sections What is a background svg gradients How do you make a background svg gradients? This script and codes were developed by Benedikte Vanderweeën on 27 March 2022, Sunday.

How do I make an background svg gradients?
  1. Background SVG Gradients Previews
  2. Background SVG Gradients HTML Codes
  3. Background SVG Gradients CSS Codes
Background SVG Gradients Previews

Background SVG Gradients HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Background SVG Gradients</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <!--Gradient Yellow-->
<section>
  <div class="container">  
    <svg>
        <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 Orange-->
<section>
  <div class="container">  
    <svg>
        <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 Red -->
<section>
  <div class="container">  
    <svg>
        <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 Violet -->
<section>
  <div class="container">  
    <svg>
        <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 Blue-->
<section>
  <div class="container">  
    <svg>
        <defs>
            <linearGradient id="Bene-grad-2" x1="1" x2="1" y1="0" y2="1">
              <stop offset="0%" stop-color="#1d62f0" />
              <stop offset="100%" stop-color="#52edc7" />
            </linearGradient>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#Bene-grad-2)" />
    </svg>
  </div>
 <section>
 <!--Gradient green -->
<section>
  <div class="container">  
    <svg>
        <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="#87fc70" />
            </linearGradient>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#Bene-grad-1)" />
    </svg>
  </div>
 <section>
  
  
</body>
</html>

Background SVG Gradients CSS Codes

section{
  height:400px;
}
.container{
  margin: 0 auto;
}
Do you want hide your ip address?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 NOW!