Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oli/923310 to your computer and use it in GitHub Desktop.
Save oli/923310 to your computer and use it in GitHub Desktop.
Neub attempt at a CSS gradient pattern
/*
Small flower patterns, inspired by http://leaverou.me/css3patterns
(see http://jsfiddle.net/boblet/hdagX/ for prefixed ver
Colors from http://nipponcolors.com/ Kurotobi #554236, Suoh #8e354a, Kohbai #e16b8c
*/
background:
/* circle pattern */
radial-gradient(#e16b8c 4%, transparent 4%) 0 0,
radial-gradient(#8e354a 7%, transparent 7%) -15px 0,
radial-gradient(#8e354a 7%, transparent 7%) 15px 0,
radial-gradient(#8e354a 7%, transparent 7%) 0 -15px,
radial-gradient(#8e354a 7%, transparent 7%) 0 15px,
/* triangle pattern */
radial-gradient(#e16b8c 4%, transparent 4%) 50px 50px,
linear-gradient(65deg, #8e354a 3%, transparent 3%) -20px 0,
linear-gradient(115deg, transparent 97%, #8e354a 97%) -20px 0,
linear-gradient(115deg, #8e354a 3%, transparent 3%) 20px 0,
linear-gradient(65deg, transparent 97%, #8e354a 97%) 20px 0,
linear-gradient(335deg, #8e354a 3%, transparent 3%) 0 -20px,
linear-gradient(25deg, transparent 97%, #8e354a 97%) 0 -20px,
linear-gradient(25deg, #8e354a 3%, transparent 3%) 0 20px,
linear-gradient(335deg, transparent 97%, #8e354a 97%) 0 20px;
background-size: 100px 100px;
background-color: #554236;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment