Light Silver Background gradients
This works in the Haddock Template

Usage:#

%%add-css [Background Silver Gradients] /%  
%%bg-horizontal-stripes
  <page content>
/%

Note: you can also combine these styles with other background colors

%%bg-horizontal-stripes.bg-lime ... /%
%%info.bg-horizontal-stripes ... /%

bg-horiziontal-stripes#

This is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?

bg-vertical-stripes#

This is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?

bg-diagonal-left-stripes#

This is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?

bg-diagonal-right-stripes#

This is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?

bg-checkerboard#

This is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?

bg-silver-dots#

This is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?
/*Inspired by https://css3wizardry.com/tag/css-gradients/ */ .bg-horizontal-stripes { background-image: linear-gradient(0, rgba(0,0,0,0.1) 25%, transparent 25%); background-size: 100% 4px; } .bg-vertical-stripes { background-image: linear-gradient(90deg, transparent 75%, rgba(0,0,0,0.1) 75% ); background-size: 4px 100%; } .bg-diagonal-left-stripes { background-image: linear-gradient(45deg, transparent 35%, rgba(0,0,0,0.1) 35%, rgba(0,0,0,0.1) 50%, transparent 50%, transparent 85%, rgba(0,0,0,0.1) 85%); background-size: 6px 6px; } .bg-diagonal-right-stripes { background-image: linear-gradient(-45deg, transparent 35%, rgba(0,0,0,0.1) 35%, rgba(0,0,0,0.1) 50%, transparent 50%, transparent 85%, rgba(0,0,0,0.1) 85%); background-size: 6px 6px; } .bg-checkerboard { background-image: linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%), linear-gradient(-45deg, rgba(0,0,0,0.1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.1) 75%), linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.1) 75%); background-size: 10px 10px; background-position: 0 0, 0 5px, 5px -5px, -5px 0px; } .bg-silver-dots { background-image: radial-gradient( rgba(0,0,0,0.3), rgba(0,0,0,0.3) 15%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 95%); background-size: 6px 6px; }

See Category.Add CSS Style