How to Get a Rotated Linear Gradient Svg for Use as a Background Image

How to get a rotated linear gradient svg for use as a background image?

To rotate the gradient you can e.g use the 'gradientTransform' attribute, like this:

<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"  viewBox="0 0 1 1" preserveAspectRatio="none">  <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse"    x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(65)">    <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>    <stop offset="100%" stop-color="#ff0000" stop-opacity="1"/>  </linearGradient>  <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /></svg>

Svg gradient rotation

Gradients in SVG are described by giving a start and end point. Your gradient is missing the values of the attributes, so the defaults are used: x1="0%" y1="0%" x2="100%" y2="0%". You can state explicit values and leave off the transform:

<linearGradient id="myGradient" x1="7.3%" y1="25%" x2="93.7%" y2="75%">

If you use a rotation, state its center, because its default is at (0,0), the upper left corner of the bounding box. Note the numbers must be unitless and in the range 0...1:

<linearGradient id="myGradient" gradientTransform="rotate(-30 0.5 0.5)">

Written like this, the gradient has an implicit default attribute gradientUnits="objectBoundingBox". All numbers are interpreted relative to the bounding box of the element they are used on (the circle). That makes it possible to reuse the same gradient in multiple places, each time going through the colors from start to end.

If you prefer to use numbers in the same coordinate system as the element they are used on, set gradientUnits="userSpaceOnUse" and use unitless numbers. But that means if you are coloring multiple elements with the same gradient, their start and end point will not adapt - in other words, the gradient continues across the elements.

<linearGradient id="myGradient" x1="25.45" y1="95" x2="354.55" y2="285"
                gradientUnits="userSpaceOnUse">

<linearGradient id="myGradient" gradientTransform="rotate(-30 190 190)"
                gradientUnits="userSpaceOnUse">

Keeping a Rotated Linear Gradient Unrotated when Shape is Rotated in SVG

SVG only:

The angles don't add up because of the way gradients are applied on an element. By default..

(...) It essentially scales the gradient to the size of your object, so you only have to specify coordinates in values from zero to one, and they're scaled to the size of your object automatically for you.

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients

Another way to look at it; the gradient is first applied to a square, and then stretched to fit your element's bounding box. See this example where all three elements have the same 45 degrees gradient:

<svg width="960" height="540" xmlns="http://www.w3.org/2000/svg" >  <defs>    <linearGradient id="linear" gradientTransform="rotate(45 0.5 0.5)" spreadMethod="pad">      <stop offset="49%" stop-color="gold"/>      <stop offset="51%" stop-color="blue"/>    </linearGradient>  </defs>    <path fill="url(#linear)" d="M0,0   h170 v100 h-170"/>  <path fill="url(#linear)" d="M210,0 h100 v100 h-100"/>  <path fill="url(#linear)" d="M350,0 h100 v170 h-100"/></svg>

Linear gradient across SVG line

<svg width="600" height="200" viewBox="0 190 600 200" xmlns="http://www.w3.org/2000/svg" version="1"><defs>    <linearGradient id="e" x1="40" y1="210" x2="460" y2="290" gradientUnits="userSpaceOnUse">        <stop stop-color="steelblue" offset="0" />        <stop stop-color="red" offset="1" />    </linearGradient></defs> <line x1="40" y1="210" x2="460" y2="290" stroke="url(#e)" stroke-width="30"/> </svg>

SVG rounded triangle with gradient overlay and background image

I would go with a pure CSS solution using some transformation like below

.container {  width:300px;  height:300px;  margin:auto;  position:relative;  overflow:hidden;}.container > div {  position:absolute;  width:100%;  height:100%;  border-radius:80px;  transform-origin:top left;  transform:translateX(-20%) rotate(-45deg);  overflow:hidden;}.container > div:before {   content:"";   position:absolute;   width:calc(100% * 1.4);   height:calc(100% * 1.4);   transform:rotate(45deg);  transform-origin:top left;   background:    linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),    url(https://picsum.photos/300/300?image=1069) top/cover;}

<div class="container">  <div></div></div>

Rotatable Multi-stop SVG linear gradient mixin

Finally I have a solution to my problem! I have created a LESS rotatable multi-stop linear gradient SVG mixin with aspect ratio to keep rotation true. More powerful in my honest opinion than the SVGs generated by Colorzilla or the MS gradient maker as it sets the x1 y1 x2 and y2 values as well as viewBox so you can rotate the gradient precisely without distortion. :)

All you need to do to generate a SVG gradient is as little as this,...
(ID, angle, colorstops, ratio)

.multigradient(uniqueID; 45; #fff 0, #000 100%; 2, 1);

Rotatable Multi-stop SVG linear gradient mixin on Codepen

Using 2 slightly rotated SVGs as a navigation background?

I would probably go with pseudo element and skew transformation like this:

.navigation {  display: flex;  justify-content:center;  margin-top:50px;  height:80px;  padding:30px 0;  position:relative;  margin-bottom:50px;}.navigation:before {  content:"";  position:absolute;  right:0;  left:0;  top:10px;  bottom:0;  background:#000;  transform:skewY(-3deg);  z-index:2;}.navigation:after {  content:"";  position:absolute;  right:0;  left:0;  top:10px;  bottom:0;  background:red;  transform:skewY(3deg);  z-index:1;}.navigation ul { position:relative; z-index:3;}
.navigation ul>li {  display: inline-block;}
.navigation ul>li>a {  color: #fff;  text-transform: uppercase;  text-decoration: none;}

<div class="navigation">  <ul>    <li><a href="#">Home</a></li>    <li><a href="#">About</a></li>    <li><a href="#">Products</a></li>    <li><a href="#">Contact</a></li>  </ul></div>

How to specify svg linear gradient in terms of an angle

SVG only allows gradient transform rotation origins to be specified in terms of absolute coordinates. You will need to set the rotation origin dynamically with JavaScript in order to do what I think you're looking to do: which is to rotate the gradient, but also have the color stops be evenly distributed within the containing box.

---

Related Topics