Gradient test

In this example below you will see how to do a Gradient test with some HTML / CSS and Javascript

This awesome code was written by microcipcip, you can see more from this user in the personal repository.
You can find the original code on
Copyright microcipcip ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Gradient test</title>
    <link rel="stylesheet" href="">

      <link rel="stylesheet" href="css/style.css">



  <div class="wrap">
    <h1 class="title">Modern Browsers</h1>

<h1 class="title-svg">
        <pattern id="gradient" patternUnits="userSpaceOnUse" width="400" height="600" >
            <image xlink:href="" width="600" height="400" />
    <text y="1.4em">IE FALLBACK</text>



/*Downloaded from */
body {
  padding: 40px;

.wrap {
  display: inline-block;

.title {
  margin: 0;
  padding: 0;
  color: purple;
  font-size: 120px;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  background: -webkit-linear-gradient(transparent, transparent), url("") repeat;
  -webkit-background-clip: text;

.title-svg {
  display: inline-block;
.title-svg svg {
  width: 1100px;
  height: 1.5em;
  font-size: 120px;
.title-svg svg text {
  fill: url(#gradient);