Hard Offset

Shadow & Press · Static · pure CSS

A flat, hard offset shadow with no blur — bold retro-poster depth in a single solid color.

Open in the generator →All effects
Hard Offset

CSS

/* Hard Offset — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Major Mono Display', monospace (load from Google Fonts).
 */

.text-effect {
  font-family: 'Major Mono Display', monospace;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  color: hsl(148 20% 97%);
  text-shadow: -8px 8px 0 hsl(148 80% 52%);
}

Pure CSS — just add the .text-effect class to any element.

Category
Shadow & Press
Type
Static
Browser support
All modern browsers
Capabilities
pure

Related Shadow & Press effects