WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Slice Text Effect
987
ledoc
Open In Editor
Publish Your Code
Need a Website?
Recommended
30 August 2024
Slider Parallax Effect
13 November 2024
Frame Effect to Images using Pure CSS
28 July 2023
CSS Text Color Animation
HTML
Copy
Hello
Hello
CSS
Copy
* { box-sizing: border-box; } :root { --background-color: black; --text-color: hsl(0, 0%, 100%); } body { margin: 0; } .wrapper { display: grid; place-content: center; background-color: var(--background-color); min-height: 100vh; font-family: "Oswald", sans-serif; font-size: clamp(1.5rem, 1rem + 18vw, 15rem); font-weight: 700; text-transform: uppercase; color: var(--text-color); } .wrapper > div { grid-area: 1/1/-1/-1; } .top { clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%); } .bottom { clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%); color: transparent; background: -webkit-linear-gradient(177deg, black 53%, var(--text-color) 65%); background: linear-gradient(177deg, black 53%, var(--text-color) 65%); background-clip: text; -webkit-background-clip: text; transform: translateX(-0.02em); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */