Drop Cap
Gradient Fill · Static · pure CSS
Only the first letter gets the manuscript treatment: an enlarged ::first-letter with a rich diagonal gradient fill, a thin contrast rim, and a soft drop-shadow, while the rest of the word stays plain and quiet. An optional tinted frame sits behind the cap for a fuller illuminated-initial feel.
How it works
Drop Cap is a static gradient fill text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Drop Cap exposes 3 dedicated controls — Cap Scale, Cap Hue and Frame — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Drop Cap — made with TEXT-FX · https://text-fx.app
* 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: 900;
letter-spacing: 8px;
text-transform: uppercase;
}
.text-effect {
color: hsl(0 0% 94%);
}
.text-effect::first-letter {
font-size: 2.7em;
font-weight: 800;
line-height: 1;
background: linear-gradient(155deg,
hsl(124 78% 80%) 0%,
hsl(108 85% 58%) 48%,
hsl(96 72% 34%) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
-webkit-text-stroke: 0.01em hsl(0 0% 96% / 0.9);
filter: drop-shadow(0.015em 0.025em 0.025em hsl(100 50% 8% / 0.5));
padding: 0.04em 0.1em;
border-radius: 0.08em;
outline: 0.01em solid hsl(108 45% 62% / 0.55);
outline-offset: 0.04em;
box-shadow: 0 0 0.06em 0.1em hsl(108 42% 22% / 0.32);
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Gradient Fill
- Type
- Static
- Browser support
- Gradient fill on ::first-letter via background-clip:text (all modern browsers, -webkit- prefixed)
- Capabilities
- pure