Rad Sparkle
Components
Folded Text
Canvas Bg
#e037d0
Color
#19bb4a
Top
#ecd2f9
Bottom
#4a69b2
Text Fold
Split
Text
Typography
Font Family
Font Size
Text Transform
capitalize
uppercase
lowercase
none
Font Style
normal
italic
oblique
Line Height
1.07
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: none; font-weight: undefined; font-size: 25px; color: #19bb4a; transform: translate(-50%, -50%) skew(10deg) rotateX(-10deg) rotateY(-0deg) rotateZ(-17deg); fontStyle: italic; fontFamily: system-ui, sans-serif; fontVariantCaps: normal; textAlign: [right, right, right]; textTransform: full-size-kana; letterSpacing: 0em } .folded-text:before { content: Rad Sparkle; position: absolute; left: 0; top: 0; overflow: hidden; width: 100%; color: #ecd2f9; transform:translate(0; 0) skew(-192deg) 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: #4a69b2; transform: translate(0, 0) skew(192deg) 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: 'none', fontWeight: undefined, fontSize: ['25px','33px','196px'], color: '#19bb4a', ':before': { content: 'Rad Sparkle', position: 'absolute', left: 0, top: 0, overflow: 'hidden', width: '100%', color: '#ecd2f9', transform:'translate(0, 0) skew(-192deg) 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: '#4a69b2', transform: 'translate(0, 0) skew(192deg) 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: 'italic', fontFamily: 'system-ui, sans-serif', fontVariantCaps: 'normal', textAlign: ['right', 'right', 'right'], textTransform: 'full-size-kana', letterSpacing: '0em' })
Reference:
Original Demo
Next
Grid view