Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active February 9, 2016 01:58
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mbostock/9377340 to your computer and use it in GitHub Desktop.
Save mbostock/9377340 to your computer and use it in GitHub Desktop.
Download ZIP
Radial Gradient
Raw
.block
license: gpl-3.0
Raw
README.md

A recreation in SVG of the pleasing gradient in the background of the Stripe: Checkout page.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html,
body {
position: relative;
height: 100%;
margin: 0;
}
svg {
position: absolute;
height: 100%;
width: 100%;
}
</style>
<body>
<svg width="100" height="150" viewBox="0 50 100 100" preserveAspectRatio="none">
<defs>
<radialGradient id="gradient" cx="100%" cy="100%" r="100%">
<stop offset="0%" stop-color="#fefdfe"/>
<stop offset="25%" stop-color="#f8cdda"/>
<stop offset="85%" stop-color="#1d2b64"/>
<stop offset="100%" stop-color="#0e153a"/>
</radialGradient>
</defs>
<rect width="100" height="150" fill="url(#gradient)"/>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment