Rad Sparkle
Folded Text
Canvas Bg
#55811c
Color
#36dbfb
Top
#4681d4
Bottom
#88eaba
Text Fold
Split
Text
Typography
Font Family
Font Size
Text Transform
capitalize
uppercase
lowercase
none
Font Style
normal
italic
oblique
Line Height
1.34
Letter Spacing
0
Font Weight
100
200
300
400
500
600
700
800
900
Font Variant Caps
normal
small-caps
all-small-caps
petite-caps
all-petite-caps
unicase
titling-caps
Font Stretch
ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expanded
Text Orientation
mixed
upright
sideways-right
sideways
use-glyph-orientation
inherit
initial
Effects
Blend Mode
normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
Blur
Opacity
Skew Y
Rotation
X
Y
Z
Css
.folded-text { position: absolute; top: 50%; left: 50%; white-space: nowrap; text-rendering: optimizeLegibility; filter: blur(0px); opacity: 1; mix-blend-mode: multiply; font-weight: undefined; font-size: 67px; color: #36dbfb; transform: translate(-50%, -50%) skew(10deg) rotateX(-10deg) rotateY(-0deg) rotateZ(-17deg); fontStyle: normal; fontFamily: system-ui, sans-serif; fontVariantCaps: all-small-caps; textAlign: [justify, justify, justify]; textTransform: full-width; letterSpacing: 0em } .folded-text:before { content: Rad Sparkle; position: absolute; left: 0; top: 0; overflow: hidden; width: 100%; color: #4681d4; transform:translate(0; 0) skew(-195deg) scale(1; 1.2); clipPath: polygon(0% 0%, 0 50%, 100% 50%, 100% 0%), zIndex: 2, textShadow: 2px -1px 6px rgba(0,0,0,0.2) } .folded-text:after { content: Rad Sparkle; position: absolute; left: 0; top: 0; overflow: hidden; width: 100%; height: 100%; zIndex: 1; color: #88eaba; transform: translate(0, 0) skew(195deg) scale(1, .9); clipPath: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); textShadow: 2px -1px 6px rgba(0,0,0,0.3); }
Js
import styled from '@emotion/styled' const FoldedText = styled('p')({ position: 'absolute', top: '50%', left: '50%', whiteSpace: 'nowrap', textRendering: 'optimizeLegibility', filter: 'blur(0px)', opacity: 1, mixBlendMode: 'multiply', fontWeight: undefined, fontSize: ['67px','75px','245px'], color: '#36dbfb', ':before': { content: 'Rad Sparkle', position: 'absolute', left: 0, top: 0, overflow: 'hidden', width: '100%', color: '#4681d4', transform:'translate(0, 0) skew(-195deg) scale(1, 1.2)', clipPath: 'polygon(0% 0%, 0 50%, 100% 50%, 100% 0%)', zIndex: 2, textShadow: '2px -1px 6px rgba(0,0,0,0.2)' }, ':after': { content: 'Rad Sparkle', position: 'absolute', left: 0, top: 0, overflow: 'hidden', width: '100%', height: '100%', zIndex: 1, color: '#88eaba', transform: 'translate(0, 0) skew(195deg) scale(1, .9)', clipPath: 'polygon(0 50%, 100% 50%, 100% 100%, 0% 100%)', textShadow: '2px -1px 6px rgba(0,0,0,0.3)' }, transform: 'translate(-50%, -50%) skew(10deg) rotateX(-10deg) rotateY(-0deg) rotateZ(-17deg)', fontStyle: 'normal', fontFamily: 'system-ui, sans-serif', fontVariantCaps: 'all-small-caps', textAlign: ['justify', 'justify', 'justify'], textTransform: 'full-width', letterSpacing: '0em' })
Reference:
Original Demo
Next
Grid view