Up to 70% off on hosting for WordPress Websites $2.95 /mo

Csshint recommends hosting

Halftone Text Shadow Effects

Check out this Amazing Halftone Text Shadow Effects using css. Designed by Mark.

Halftone Text Shadow Effects

Halftone Text Shadow Effects


[code language=”html”]
mixin heading(className)
h1(class="heading " + className) Hello

+heading(‘heading–stroke heading–shadow’)
+heading(‘heading–stroke heading–halftone’)
+heading(‘heading–stroke heading–halftone heading–halftone-color’)

| Halftone effect from
a(href="http://www.patternify.com/") Patternify


[code language=”css”]
$body: #f2cee6;
$stroke: #0d1b1e;
$shadow: #2dc7ff;
$size: 6rem;

@mixin stroke-width($property) {
-webkit-text-stroke-width: $property;
-moz-text-stroke-width: $property;

@mixin stroke-color($property) {
-webkit-text-stroke-color: $property;
-moz-text-stroke-color: $property;

@mixin background-clip($property) {
-webkit-background-clip: $property;
-moz-background-clip: $property;
background-clip: $property;

@mixin fill-color($property) {
-webkit-text-fill-color: $property;
-moz-text-fill-color: $property;

body {
background-color: $body;
padding: 4rem;
text-align: center;

.grid {
display: grid;
grid-template-columns: 1fr;
grid-gap: 1rem;
@media screen and (min-width: 768px) {
grid-template-columns: 1fr 1fr;

.heading {
font-size: $size;
letter-spacing: 6px;
margin: 0;

&–stroke {
@include stroke-width(2px);
@include stroke-color($stroke);
color: transparent;

&–shadow {
text-shadow: 6px 6px $shadow;

&–stroke-shadow {
color: $body;
text-shadow: -2px 0 $stroke, 0 -2px $stroke, 2px 0 $stroke, 0 2px $stroke,
2px 2px $stroke, -2px -2px $stroke, -2px 2px $stroke, 2px -2px $stroke,
6px 6px $shadow;

&–halftone {
position: relative;

&:after {
background: $halftone repeat;
@include stroke-width(0);
@include background-clip(text);
@include fill-color(transparent);
font-size: $size;
letter-spacing: 6px;
left: calc(50% + 6px);
top: calc(50% + 6px);
content: "Hello";
z-index: -1;
position: absolute;
transform: translate(-50%, -50%);

&-color {
&:after {
background-color: $shadow;

.info {
padding: 1rem 0;


Strokes, Shadows + Halftone Effects