Drop Shadow

Shadow & Press · Static · pure CSS

A simple soft drop shadow under solid text, with blur and distance controls. The dependable, readable depth cue.

Open in the generator →All effects
Drop Shadow

CSS

/* Drop Shadow — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Unbounded', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Unbounded', sans-serif;
  font-weight: 400;
  letter-spacing: 0px;
  text-transform: uppercase;
}

.text-effect {
  color: hsl(201 25% 96%);
  text-shadow: 4px 6px 7px hsl(201 55% 6% / 0.7);
}

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