Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 4th, 2012  |  syntax: None  |  size: 1.35 KB  |  hits: 14  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. How to get a rotated linear gradient svg for use as a background image?
  2. <?xml version="1.0" ?>
  3. <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  4.   <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">
  5.     <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
  6.     <stop offset="100%" stop-color="#ff0000" stop-opacity="1"/>
  7.   </linearGradient>
  8.   <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
  9. </svg>
  10.        
  11. background: linear-gradient(bottom, rgba(239, 239, 214,0) 0%, rgba(239, 239, 214,.8) 100%),
  12. linear-gradient(left,  rgba(239, 239, 214,0) 60%,rgba(207, 223, 144,1) 100%),
  13. linear-gradient(right, rgba(239, 239, 214,0) 0%,rgba(239, 239, 214,1) 60%),
  14. linear-gradient(top, rgba(239, 239, 214,0) 60%,#cfdf90 100%);
  15. }
  16.        
  17. <?xml version="1.0" ?>
  18. <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
  19.  viewBox="0 0 1 1" preserveAspectRatio="none">
  20.   <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse"
  21.    x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(65)">
  22.     <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
  23.     <stop offset="100%" stop-color="#ff0000" stop-opacity="1"/>
  24.   </linearGradient>
  25.   <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
  26. </svg>
create a new version of this paste RAW Paste Data