Skip to content

Instantly share code, notes, and snippets.

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

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

<!DOCTYPE html>
<meta charset="utf-8">
body {
position: relative;
height: 100%;
margin: 0;
svg {
position: absolute;
height: 100%;
width: 100%;
<svg width="100" height="150" viewBox="0 50 100 100" preserveAspectRatio="none">
<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"/>
<rect width="100" height="150" fill="url(#gradient)"/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment