CSS effect to render a font with “rubber stamp” effect

Question

Is there any effective way in CSS to render a font with an effect that makes it look like a rubber stamp? As if ink from a rubber stamp was laid over printed material?

Even better would be for the same effect to be applied to a border, as if the border were part of the rubber stamp. Like this:

Answer 1

This is close to what you're looking for - it uses an overlay pseudoelement along with mix-blend-mode to create that genuine rubber-stamp look. Everything is done in CSS except for the rubber stamp texture itself.

Screenshot:

Live Demo (now works in Firefox too):

* {
  box-sizing: border-box;
}

h1 {
  position: relative;
  display: inline-block;
  color: blue;
  padding: 15px;
  background-color: white;
  box-shadow:inset 0px 0px 0px 10px blue;
}

h1:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("http://i.imgur.com/5O74VI6.jpg");
  mix-blend-mode: lighten;
}

<h1>
Example Text
</h1>

Answer 2

The awful truth

There is no way you can do this with only CSS.

The alternatives

Its either possible to achieve the noise effect by using background image or just plain and simply using a font.

The proposed solution

The best solution would be the one that make the result looks identical on all the old/modern browsers and that would visually be the closest to the desired goal.

I would chose the font alternative as it is light-weight and will be compatible with a lot of browser with less struggle with the CSS vendor prefixes.

A simple example

So basically using any font looking like the rubber stamp (you can find some pretty nice free fonts out there just Google it) you could do something that would look close to your picture ...

.rubber {
  box-shadow: 0 0 0 3px blue, 0 0 0 2px blue inset;  
  border: 2px solid transparent;
  border-radius: 4px;
  display: inline-block;
  padding: 5px 2px;
  line-height: 22px;
  color: blue;
  font-size: 24px;
  font-family: 'Black Ops One', cursive;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.4;
  width: 155px;
  transform: rotate(-5deg);
}

<link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>

<div class="rubber">
  Early bird discount
</div>

Answer 3

This looks like a pretty cool solution: https://codepen.io/chris22smith/pen/kDtiE

div.box
{
  width:200px;
  height:200px;
  border:solid 1px #333;
  display:inline-block;
  vertical-align:top;
  box-sizing:border-box;
  padding:10px;
  color:#999;
  position:relative;
}

div.box.sample:after
{
    content:"SAMPLE";
    position:absolute;
    top:70px;
    left:10px;
    z-index:1;
    font-family:Arial,sans-serif;
    -webkit-transform: rotate(-45deg); /* Safari */
    -moz-transform: rotate(-45deg); /* Firefox */
    -ms-transform: rotate(-45deg); /* IE */
    -o-transform: rotate(-45deg); /* Opera */
    transform: rotate(-45deg);
    font-size:40px;
    color:#c00;
    background:#fff;
    border:solid 4px #c00;
    padding:5px;
    border-radius:5px;
    zoom:1;
    filter:alpha(opacity=20);
    opacity:0.2;
    -webkit-text-shadow: 0 0 2px #c00;
    text-shadow: 0 0 2px #c00;
    box-shadow: 0 0 2px #c00;
}

And the HTML:

<div class="box">
  Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
</div>
<div class="box sample">

</div>
<div class="box sample">
  Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus.
</div>

Answer 4

A specific font, a color, a noisy image (or gradient pattern) and mix-blend-mode:overlay; can do it (similar but different from Maximilien tested in both FF/Chrome).

I use a gradient for demo (from translucide white to transparent) ,modify it or replace it with any noisy image of your choice .

p {
  background: linear-gradient(to left, transparent 50%, rgba(255, 255, 255, 0.3) 50%), linear-gradient(to bottom, transparent 50%, rgba(255, 255, 255, 0.3)50%);
  background-size: 2px 4px, 4px 2px;
  font-family: "black ops one", cursive;
  display: inline-block;
  margin:0 1em 1em;
  font-size: 40px;
  letter-spacing: 8px;
  color: #0E5AD2;
  transform: rotate(-5deg);
}
p span {
  font-family: 'Fredericka the Great', cursive;
  width: 7.3em;
  letter-spacing: 10px;
  display: inline-block;
  padding: 0.5em;
  border-radius: 15px;
  box-shadow: 0 0 0 5px, inset 0 0 0 5px white, inset 0 0 0 8px, inset 0 0 0 400px white;
  mix-blend-mode: overlay;
  outline-offset: -1px;
  outline: solid 8px;
  margin: 8px;
}
p span:first-line,
p:first-line {
  letter-spacing: 0;
}
p+p span {
  border-radius: 15px;
  padding: 0.25em 1em;
  font-family: "black ops one", cursive;
  display: inline-block;
  margin: 1em 2em;
  font-size: 40px;
  letter-spacing: 8px;
  width: 7em;
}
code {
  font-family: 'Fredericka the Great', cursive;
}
div span {
  font-family: "black ops one", cursive;
}

<link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>

<p><span>EARLY BIRDS DISCOUNT</span>
</p>


<p><span>EARLY BIRDS DISCOUNT</span>
</p>
<div>font used : <span>black ops one </span>and <code>frederika the great</code>
</div>