Sassy Text Shadows Test

dabblet.css

/**
 * Sassy Text Shadows Test
 * fancy shadows generated by Sass
 * see https://github.com/canarymason/sassytextshadow for more information
 * https://rubygems.org/gems/sassy-text-shadow to install
 */

body {
  text-align: center;
  font-family: helvetica, georgia;
}

p {
  margin-bottom: 3em;
}

h1 {
  text-shadow: #bada55 0.866px 0.5px 0, #bada55 1.732px 1.0px 0, #bada55 2.598px 1.5px 0, #bada55 3.464px 2.0px 0, #bada55 4.33px 2.5px 0, #bada55 5.196px 3.0px 0, #bada55 6.062px 3.5px 0, #bada55 6.928px 4.0px 0, #bada55 7.794px 4.5px 0, #bada55 8.66px 5.0px 0, #bada55 9.526px 5.5px 0, #bada55 10.392px 6.0px 0, #bada55 11.258px 6.5px 0, #bada55 12.124px 7.0px 0, #bada55 12.99px 7.5px 0, #bada55 13.856px 8.0px 0, #bada55 14.722px 8.5px 0, #bada55 15.588px 9.0px 0, #bada55 16.454px 9.5px 0, #bada55 17.321px 10.0px 0, #bada55 18.187px 10.5px 0, #bada55 19.053px 11.0px 0, #bada55 19.919px 11.5px 0, #bada55 20.785px 12.0px 0, #bada55 21.651px 12.5px 0;
  line-height: 4em;
}


h2 {
  text-shadow: rgba(186, 218, 85, 0.01) 49.901px 3.14px 0.1px, rgba(186, 218, 85, 0.02) 49.606px 6.267px 0.2px, rgba(186, 218, 85, 0.03) 49.114px 9.369px 0.3px, rgba(186, 218, 85, 0.04) 48.429px 12.434px 0.4px, rgba(186, 218, 85, 0.05) 47.553px 15.451px 0.5px, rgba(186, 218, 85, 0.06) 46.489px 18.406px 0.6px, rgba(186, 218, 85, 0.07) 45.241px 21.289px 0.7px, rgba(186, 218, 85, 0.08) 43.815px 24.088px 0.8px, rgba(186, 218, 85, 0.09) 42.216px 26.791px 0.9px, rgba(186, 218, 85, 0.1) 40.451px 29.389px 1px, rgba(186, 218, 85, 0.11) 38.526px 31.871px 1.1px, rgba(186, 218, 85, 0.12) 36.448px 34.227px 1.2px, rgba(186, 218, 85, 0.13) 34.227px 36.448px 1.3px, rgba(186, 218, 85, 0.14) 31.871px 38.526px 1.4px, rgba(186, 218, 85, 0.15) 29.389px 40.451px 1.5px, rgba(186, 218, 85, 0.16) 26.791px 42.216px 1.6px, rgba(186, 218, 85, 0.17) 24.088px 43.815px 1.7px, rgba(186, 218, 85, 0.18) 21.289px 45.241px 1.8px, rgba(186, 218, 85, 0.19) 18.406px 46.489px 1.9px, rgba(186, 218, 85, 0.2) 15.451px 47.553px 2px, rgba(186, 218, 85, 0.21) 12.434px 48.429px 2.1px, rgba(186, 218, 85, 0.22) 9.369px 49.114px 2.2px, rgba(186, 218, 85, 0.23) 6.267px 49.606px 2.3px, rgba(186, 218, 85, 0.24) 3.14px 49.901px 2.4px, rgba(186, 218, 85, 0.25) 0.0px 50px 2.5px, rgba(186, 218, 85, 0.26) -3.14px 49.901px 2.6px, rgba(186, 218, 85, 0.27) -6.267px 49.606px 2.7px, rgba(186, 218, 85, 0.28) -9.369px 49.114px 2.8px, rgba(186, 218, 85, 0.29) -12.434px 48.429px 2.9px, rgba(186, 218, 85, 0.3) -15.451px 47.553px 3px, rgba(186, 218, 85, 0.31) -18.406px 46.489px 3.1px, rgba(186, 218, 85, 0.32) -21.289px 45.241px 3.2px, rgba(186, 218, 85, 0.33) -24.088px 43.815px 3.3px, rgba(186, 218, 85, 0.34) -26.791px 42.216px 3.4px, rgba(186, 218, 85, 0.35) -29.389px 40.451px 3.5px, rgba(186, 218, 85, 0.36) -31.871px 38.526px 3.6px, rgba(186, 218, 85, 0.37) -34.227px 36.448px 3.7px, rgba(186, 218, 85, 0.38) -36.448px 34.227px 3.8px, rgba(186, 218, 85, 0.39) -38.526px 31.871px 3.9px, rgba(186, 218, 85, 0.4) -40.451px 29.389px 4px, rgba(186, 218, 85, 0.41) -42.216px 26.791px 4.1px, rgba(186, 218, 85, 0.42) -43.815px 24.088px 4.2px, rgba(186, 218, 85, 0.43) -45.241px 21.289px 4.3px, rgba(186, 218, 85, 0.44) -46.489px 18.406px 4.4px, rgba(186, 218, 85, 0.45) -47.553px 15.451px 4.5px, rgba(186, 218, 85, 0.46) -48.429px 12.434px 4.6px, rgba(186, 218, 85, 0.47) -49.114px 9.369px 4.7px, rgba(186, 218, 85, 0.48) -49.606px 6.267px 4.8px, rgba(186, 218, 85, 0.49) -49.901px 3.14px 4.9px, rgba(186, 218, 85, 0.5) -50px 0.0px 5px, rgba(186, 218, 85, 0.51) -49.901px -3.14px 5.1px, rgba(186, 218, 85, 0.52) -49.606px -6.267px 5.2px, rgba(186, 218, 85, 0.53) -49.114px -9.369px 5.3px, rgba(186, 218, 85, 0.54) -48.429px -12.434px 5.4px, rgba(186, 218, 85, 0.55) -47.553px -15.451px 5.5px, rgba(186, 218, 85, 0.56) -46.489px -18.406px 5.6px, rgba(186, 218, 85, 0.57) -45.241px -21.289px 5.7px, rgba(186, 218, 85, 0.58) -43.815px -24.088px 5.8px, rgba(186, 218, 85, 0.59) -42.216px -26.791px 5.9px, rgba(186, 218, 85, 0.6) -40.451px -29.389px 6px, rgba(186, 218, 85, 0.61) -38.526px -31.871px 6.1px, rgba(186, 218, 85, 0.62) -36.448px -34.227px 6.2px, rgba(186, 218, 85, 0.63) -34.227px -36.448px 6.3px, rgba(186, 218, 85, 0.64) -31.871px -38.526px 6.4px, rgba(186, 218, 85, 0.65) -29.389px -40.451px 6.5px, rgba(186, 218, 85, 0.66) -26.791px -42.216px 6.6px, rgba(186, 218, 85, 0.67) -24.088px -43.815px 6.7px, rgba(186, 218, 85, 0.68) -21.289px -45.241px 6.8px, rgba(186, 218, 85, 0.69) -18.406px -46.489px 6.9px, rgba(186, 218, 85, 0.7) -15.451px -47.553px 7px, rgba(186, 218, 85, 0.71) -12.434px -48.429px 7.1px, rgba(186, 218, 85, 0.72) -9.369px -49.114px 7.2px, rgba(186, 218, 85, 0.73) -6.267px -49.606px 7.3px, rgba(186, 218, 85, 0.74) -3.14px -49.901px 7.4px, rgba(186, 218, 85, 0.75) 0.0px -50px 7.5px, rgba(186, 218, 85, 0.76) 3.14px -49.901px 7.6px, rgba(186, 218, 85, 0.77) 6.267px -49.606px 7.7px, rgba(186, 218, 85, 0.78) 9.369px -49.114px 7.8px, rgba(186, 218, 85, 0.79) 12.434px -48.429px 7.9px, rgba(186, 218, 85, 0.8) 15.451px -47.553px 8px, rgba(186, 218, 85, 0.81) 18.406px -46.489px 8.1px, rgba(186, 218, 85, 0.82) 21.289px -45.241px 8.2px, rgba(186, 218, 85, 0.83) 24.088px -43.815px 8.3px, rgba(186, 218, 85, 0.84) 26.791px -42.216px 8.4px, rgba(186, 218, 85, 0.85) 29.389px -40.451px 8.5px, rgba(186, 218, 85, 0.86) 31.871px -38.526px 8.6px, rgba(186, 218, 85, 0.87) 34.227px -36.448px 8.7px, rgba(186, 218, 85, 0.88) 36.448px -34.227px 8.8px, rgba(186, 218, 85, 0.89) 38.526px -31.871px 8.9px, rgba(186, 218, 85, 0.9) 40.451px -29.389px 9px, rgba(186, 218, 85, 0.91) 42.216px -26.791px 9.1px, rgba(186, 218, 85, 0.92) 43.815px -24.088px 9.2px, rgba(186, 218, 85, 0.93) 45.241px -21.289px 9.3px, rgba(186, 218, 85, 0.94) 46.489px -18.406px 9.4px, rgba(186, 218, 85, 0.95) 47.553px -15.451px 9.5px, rgba(186, 218, 85, 0.96) 48.429px -12.434px 9.6px, rgba(186, 218, 85, 0.97) 49.114px -9.369px 9.7px, rgba(186, 218, 85, 0.98) 49.606px -6.267px 9.8px, rgba(186, 218, 85, 0.99) 49.901px -3.14px 9.9px, #bada55 50px 0.0px 10px;
  line-height: 8em;
}


h3 {
  text-shadow: rgba(186, 218, 85, 0.01) 79.93px -6.694px 0.1px, rgba(185, 218, 85, 0.02) 79.719px -13.341px 0.2px, rgba(185, 218, 85, 0.03) 79.369px -19.895px 0.3px, rgba(184, 218, 85, 0.04) 78.88px -26.309px 0.4px, rgba(183, 218, 85, 0.05) 78.252px -32.539px 0.5px, rgba(182, 218, 85, 0.06) 77.487px -38.54px 0.6px, rgba(180, 218, 85, 0.07) 76.586px -44.271px 0.7px, rgba(179, 218, 85, 0.08) 75.55px -49.692px 0.8px, rgba(177, 218, 85, 0.09) 74.382px -54.764px 0.9px, rgba(175, 218, 85, 0.1) 73.084px -59.452px 1px, rgba(173, 218, 85, 0.11) 71.657px -63.722px 1.1px, rgba(170, 218, 85, 0.12) 70.105px -67.546px 1.2px, rgba(168, 218, 85, 0.13) 68.429px -70.896px 1.3px, rgba(165, 218, 85, 0.14) 66.634px -73.749px 1.4px, rgba(162, 218, 85, 0.15) 64.721px -76.085px 1.5px, rgba(159, 218, 85, 0.16) 62.695px -77.886px 1.6px, rgba(155, 218, 85, 0.17) 60.56px -79.142px 1.7px, rgba(152, 218, 85, 0.18) 58.317px -79.842px 1.8px, rgba(148, 218, 85, 0.19) 55.973px -79.982px 1.9px, rgba(144, 218, 85, 0.2) 53.53px -79.562px 2px, rgba(140, 218, 85, 0.21) 50.994px -78.583px 2.1px, rgba(136, 218, 85, 0.22) 48.368px -77.053px 2.2px, rgba(131, 218, 85, 0.23) 45.657px -74.983px 2.3px, rgba(126, 218, 85, 0.24) 42.866px -72.386px 2.4px, rgba(121, 218, 85, 0.25) 40.0px -69.282px 2.5px, rgba(116, 218, 85, 0.26) 37.064px -65.692px 2.6px, rgba(111, 218, 85, 0.27) 34.062px -61.641px 2.7px, rgba(105, 218, 85, 0.28) 31.001px -57.158px 2.8px, rgba(99, 218, 85, 0.29) 27.886px -52.274px 2.9px, rgba(93, 218, 85, 0.3) 24.721px -47.023px 3px, rgba(87, 218, 85, 0.31) 21.514px -41.442px 3.1px, rgba(85, 218, 89, 0.32) 18.268px -35.571px 3.2px, rgba(85, 218, 96, 0.33) 14.991px -29.45px 3.3px, rgba(85, 218, 103, 0.34) 11.687px -23.123px 3.4px, rgba(85, 218, 110, 0.35) 8.362px -16.633px 3.5px, rgba(85, 218, 117, 0.36) 5.023px -10.027px 3.6px, rgba(85, 218, 124, 0.37) 1.675px -3.35px 3.7px, rgba(85, 218, 132, 0.38) -1.675px 3.35px 3.8px, rgba(85, 218, 140, 0.39) -5.023px 10.027px 3.9px, rgba(85, 218, 148, 0.4) -8.362px 16.633px 4px, rgba(85, 218, 156, 0.41) -11.687px 23.123px 4.1px, rgba(85, 218, 164, 0.42) -14.991px 29.45px 4.2px, rgba(85, 218, 173, 0.43) -18.268px 35.571px 4.3px, rgba(85, 218, 182, 0.44) -21.514px 41.442px 4.4px, rgba(85, 218, 190, 0.45) -24.721px 47.023px 4.5px, rgba(85, 218, 200, 0.46) -27.886px 52.274px 4.6px, rgba(85, 218, 209, 0.47) -31.001px 57.158px 4.7px, rgba(85, 217, 218, 0.48) -34.062px 61.641px 4.8px, rgba(85, 208, 218, 0.49) -37.064px 65.692px 4.9px, rgba(85, 198, 218, 0.5) -40.0px 69.282px 5px, rgba(85, 187, 218, 0.51) -42.866px 72.386px 5.1px, rgba(85, 177, 218, 0.52) -45.657px 74.983px 5.2px, rgba(85, 167, 218, 0.53) -48.368px 77.053px 5.3px, rgba(85, 156, 218, 0.54) -50.994px 78.583px 5.4px, rgba(85, 145, 218, 0.55) -53.53px 79.562px 5.5px, rgba(85, 134, 218, 0.56) -55.973px 79.982px 5.6px, rgba(85, 122, 218, 0.57) -58.317px 79.842px 5.7px, rgba(85, 111, 218, 0.58) -60.56px 79.142px 5.8px, rgba(85, 99, 218, 0.59) -62.695px 77.886px 5.9px, rgba(85, 87, 218, 0.6) -64.721px 76.085px 6px, rgba(95, 85, 218, 0.61) -66.634px 73.749px 6.1px, rgba(108, 85, 218, 0.62) -68.429px 70.896px 6.2px, rgba(120, 85, 218, 0.63) -70.105px 67.546px 6.3px, rgba(133, 85, 218, 0.64) -71.657px 63.722px 6.4px, rgba(146, 85, 218, 0.65) -73.084px 59.452px 6.5px, rgba(159, 85, 218, 0.66) -74.382px 54.764px 6.6px, rgba(172, 85, 218, 0.67) -75.55px 49.692px 6.7px, rgba(186, 85, 218, 0.68) -76.586px 44.271px 6.8px, rgba(200, 85, 218, 0.69) -77.487px 38.54px 6.9px, rgba(214, 85, 218, 0.7) -78.252px 32.539px 7px, rgba(218, 85, 208, 0.71) -78.88px 26.309px 7.1px, rgba(218, 85, 194, 0.72) -79.369px 19.895px 7.2px, rgba(218, 85, 179, 0.73) -79.719px 13.341px 7.3px, rgba(218, 85, 164, 0.74) -79.93px 6.694px 7.4px, rgba(218, 85, 149, 0.75) -80px 0.0px 7.5px, rgba(218, 85, 134, 0.76) -79.93px -6.694px 7.6px, rgba(218, 85, 119, 0.77) -79.719px -13.341px 7.7px, rgba(218, 85, 103, 0.78) -79.369px -19.895px 7.8px, rgba(218, 85, 88, 0.79) -78.88px -26.309px 7.9px, rgba(218, 98, 85, 0.8) -78.252px -32.539px 8px, rgba(218, 115, 85, 0.81) -77.487px -38.54px 8.1px, rgba(218, 131, 85, 0.82) -76.586px -44.271px 8.2px, rgba(218, 147, 85, 0.83) -75.55px -49.692px 8.3px, rgba(218, 164, 85, 0.84) -74.382px -54.764px 8.4px, rgba(218, 181, 85, 0.85) -73.084px -59.452px 8.5px, rgba(218, 198, 85, 0.86) -71.657px -63.722px 8.6px, rgba(218, 216, 85, 0.87) -70.105px -67.546px 8.7px, rgba(203, 218, 85, 0.88) -68.429px -70.896px 8.8px, rgba(185, 218, 85, 0.89) -66.634px -73.749px 8.9px, rgba(167, 218, 85, 0.9) -64.721px -76.085px 9px, rgba(149, 218, 85, 0.91) -62.695px -77.886px 9.1px, rgba(131, 218, 85, 0.92) -60.56px -79.142px 9.2px, rgba(112, 218, 85, 0.93) -58.317px -79.842px 9.3px, rgba(93, 218, 85, 0.94) -55.973px -79.982px 9.4px, rgba(85, 218, 96, 0.95) -53.53px -79.562px 9.5px, rgba(85, 218, 115, 0.96) -50.994px -78.583px 9.6px, rgba(85, 218, 134, 0.97) -48.368px -77.053px 9.7px, rgba(85, 218, 154, 0.98) -45.657px -74.983px 9.8px, rgba(85, 218, 174, 0.99) -42.866px -72.386px 9.9px, #55dac1 -40.0px -69.282px 10px;
  line-height: 8em;
}

dabblet.html

<h1>ANGLES ARE ANGULAR</h1>
<p>The above heading should have a long shadow at a -30 degree angle.</p>
<h2>Wheeee</h2>
<p>The above heading should have a crazy text shadow.</p>
<h3>Ooooohhhhhh</h3>
<p>The above heading should have a different crazy text shadow.</p>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}