Rad Sparkle
Folded Text
Canvas Bg
Color
Top
Bottom
Text Fold
Split
Text
Typography
Font Family
Font Size
Text Transform
capitalize
uppercase
lowercase
none
Font Style
normal
italic
oblique
Line Height
1.73
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: 196px; color: #8d7f6e; transform: translate(-50%, -50%) skew(10deg) rotateX(-10deg) rotateY(-0deg) rotateZ(-17deg); fontStyle: normal; fontFamily: "helvetica neue", helvetica, arial, sans-serif; fontVariantCaps: normal; textAlign: [center, center, center]; textTransform: full-width; letterSpacing: 0em } .folded-text:before { content: Rad Sparkle; position: absolute; left: 0; top: 0; overflow: hidden; width: 100%; color: #dffb48; transform:translate(0; 0) skew(-186deg) 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: #aab6dc; transform: translate(0, 0) skew(186deg) 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: ['196px','204px','229px'], color: '#8d7f6e', ':before': { content: 'Rad Sparkle', position: 'absolute', left: 0, top: 0, overflow: 'hidden', width: '100%', color: '#dffb48', transform:'translate(0, 0) skew(-186deg) 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: '#aab6dc', transform: 'translate(0, 0) skew(186deg) 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: '"helvetica neue", helvetica, arial, sans-serif', fontVariantCaps: 'normal', textAlign: ['center', 'center', 'center'], textTransform: 'full-width', letterSpacing: '0em' })
Reference:
Original Demo
Previous likes
Next
Grid view