CSS background pattern for grip boxes

Question

I would like to use CSS to create a "grip" background used to indicate that an element is draggable. (See https://ux.stackexchange.com/a/34639/39138)

Currently I have a dnd class for the item, and CSS that looks like:

.dnd {
  background: #99bbee; /* would like to be able to change this dynamically */
  padding: 1em;
  margin: 2em;
  border-radius: 0.25em;
  width: 14em;
  transition: all 0.25s;
}
.dnd:hover {
  box-shadow: 0.25em 0.25em 0.3em rgba(0,0,0,0.2);
  margin: 1.75em 2.1em 2.25em 1.9em;
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.dnd:active { 
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
.dnd::before { /* the grip */
  content: " ";
  display: inline-block;
  width: 1.5em;
  height: 2em;
  margin: -0.5em 0.75em -0.5em -0.5em; 

  background-color: transparent;
  background-size: 0.5em 0.5em;
  background-position: 0 0;
  /* Background image - unfortunately requires background color */
  background-image: 
    -webkit-linear-gradient(#99bbee 50%, transparent 50%),
    -webkit-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%);
  background-image: 
    -moz-linear-gradient(#99bbee 50%, transparent 50%),
    -moz-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%);
  background-image: 
    -o-linear-gradient(#99bbee 50%, transparent 50%),
    -o-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%);
  background-image: 
    linear-gradient(#99bbee 50%, transparent 50%),
    linear-gradient(to right, rgba(0,0,0,0.2) 50%, transparent 50%);
}

...This works in creating a few boxes as a background on the grip, but I would like to not have the grip pseudo-element rely on a hard-coded background color (in this case #99bbee; it's OK that it uses rgba(0,0,0,0.2)). Is there a way to rewrite this CSS background image so that it is more flexible w/r/t background color?

Here is a jsfiddle: https://jsfiddle.net/luken/r69wfwjd/5/

---

2021 Edit: CSS Variables are now widely supported, so they are probably the best solution.

Answer 1

I think the best option might be an SVG image background.

In fact, if you take a look at stackoverflow's own grip to expand the textarea (.grippie) when writing an answer, it uses an SVG background.

So the idea is to use the css background property with url(...) and a data uri as the url.

The SVG code was taken from here.

.grip {
  background-size: cover;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjODg4Ij48L3JlY3Q+Cjwvc3ZnPg==");
  width: 10px;
  height: 15px;
  cursor: grab;
  cursor: -webkit-grab;
  margin: 0.5em;
}

.container {
  display: flex;
  align-items: center;
}

<div class="container" draggable="true">
  <div class="grip"></div>
  <div class="content">A thing with a grip</div>
</div>
<div class="container" draggable="true">
  <div class="grip"></div>
  <div class="content">A thing with a grip</div>
</div>

Answer 2

You can get this effect using multiple shadows for the pseudo element:

.dnd {
  background: tomato;
  padding: 1em;
  margin: 2em;
  border-radius: 0.25em;
  width: 14em;
  transition: all 0.25s;
  font-family: Arial;
}


.dnd::before {
  content: " ";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin: 0em 1.5em 0em -1em; 

  background-color: transparent;
  box-shadow: 0.5em -1em 0 gray,
              0.5em -0.25em 0 gray,
              0.5em 0.5em 0 gray,
              0.5em 1.25em 0 gray,
              1.25em -1em 0 gray,
              1.25em -0.25em 0 gray,
              1.25em 0.5em 0 gray,
              1.25em 1.25em 0 gray;
}

<div class="dnd">
Thing that can be dragged
</div>

I have created a snippet where the grid is always a darker version of the background.

There are 2 diagonal gradients, that joint to create a square

.dnd {
  background: tomato;
  padding: 1em;
  margin: 2em;
  border-radius: 0.25em;
  width: 14em;
  transition: all 0.25s;
  font-family: Arial;
}


.dnd::before {
  content: " ";
  display: inline-block;
  width: 1.5em;
  height: 2em;
  margin: -0.5em 0.75em -0.5em -0.5em; 

  background-color: transparent;
  background-size: 0.5em 0.5em;
  background-position: 0 0, 0.25em 0.25em;

  background-image: 
linear-gradient(45deg, rgba(0,0,0,0.7) 0.1768em, transparent 0.1767em),
linear-gradient(225deg, rgba(0,0,0,0.7) 0.1768em, transparent 0.1767em);
  

}

<div class="dnd">
Thing that can be dragged
</div>