{"id":155689,"date":"2020-09-21T11:00:33","date_gmt":"2020-09-21T15:00:33","guid":{"rendered":"https:\/\/1stwebdesigner.com\/?p=155689"},"modified":"2020-09-18T15:37:05","modified_gmt":"2020-09-18T19:37:05","slug":"css-text-effects","status":"publish","type":"post","link":"https:\/\/1stwebdesigner.com\/css-text-effects\/","title":{"rendered":"25+ Interesting CSS Text Effects"},"content":{"rendered":"<p>In today&#8217;s post, we&#8217;re sharing some of the most interesting and unusual CSS text effects &#8211; some with the help of JavaScript &#8211; that we&#8217;ve found on CodePen for your inspiration as well as to possibly use in any of your upcoming projects. These examples range from animations, to hover interactions, to simply unique. Maybe you&#8217;ve seen some before, or maybe they are all new to you. Regardless, we hope you find them useful and inspirational.<\/p>\n<div class=\"elements-freelance ipa\">\n<h2>Your Web Designer Toolbox<br \/><span class=\"subtitle-freelance\">Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets<\/span><\/h2>\n<p><a href=\"https:\/\/1.envato.market\/gZdyB\" target=\"blank\" rel=\"nofollow noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2018\/05\/speckyboy-freelance.jpg\" alt=\"\" width=\"834\" height=\"230\" class=\"alignnone size-full wp-image-153949\"\/><\/a><br \/><a href=\"https:\/\/1.envato.market\/gZdyB\" target=\"blank\" rel=\"nofollow noopener noreferrer\"><button style=\"background-color:#82B541;margin-top:20px;border:none; border-radius:6px;font-weight:600;color:#ffffff;text-align:center;font-size:14px;width:200px;cursor:pointer;padding:14px 19px 14px 19px\" type=\"button\">DOWNLOAD NOW<\/button><\/a><img loading=\"lazy\" decoding=\"async\" height=\"0\" width=\"0\" src=\"\/\/1.envato.market\/i\/20877\/298927\/4662?subId1=trends-ipa-091620\" style=\"position:absolute;visibility:hidden;\" border=\"0\" \/><\/div>\n\n<h2><a href=\"https:\/\/codepen.io\/bosworthco\/pen\/YWBLpR\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Perspective Text Hover<\/a><\/h2>\n<p>A nifty stair climbing animation on hover.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='YWBLpR' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen CSS Perspective Text Hover by James Bosworth (@bosworthco) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/wagerfield\/pen\/wftcE\" target=\"_blank\" rel=\"noopener noreferrer\">LOVE Text Effect<\/a><\/h2>\n<p>Here&#8217;s an unusual typing effect.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='wftcE' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen LOVE Text Effect by Matthew Wagerfield (@wagerfield) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/giana\/pen\/qmKNeE\" target=\"_blank\" rel=\"noopener noreferrer\">CSS-Only Shimmering Neon Text<\/a><\/h2>\n<p>A very cool shimmering neon text effect made with pure CSS.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='qmKNeE' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen CSS-only shimmering neon text by Giana (@giana) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/Tbgse\/pen\/dYaJyJ\" target=\"_blank\" rel=\"noopener noreferrer\">Terminal Text Effect<\/a><\/h2>\n<p>Another typing effect, this time replicating a terminal with a blinking cursor.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='dYaJyJ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Terminal Text Effect by Tobias (@Tbgse) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/moklick\/pen\/tAlJB\" target=\"_blank\" rel=\"noopener noreferrer\">Flashing Neon Text<\/a><\/h2>\n<p>This one has the appearance of a neon sign flashing on and off, coded in only CSS.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='tAlJB' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen CSS Text-FX by moklick (@moklick) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/natewiley\/pen\/xGyZXp\" target=\"_blank\" rel=\"noopener noreferrer\">GSAP Text Animation<\/a><\/h2>\n<p>Here&#8217;s an interesting animated text effect that brings letters together into words.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='xGyZXp' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen GSAP Text Animation by Nate Wiley (@natewiley) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/mimikos\/pen\/QMjjzy\" target=\"_blank\" rel=\"noopener noreferrer\">Silent Movie Text Effect<\/a><\/h2>\n<p>This effect makes makes the text look like an old silent movie, all done with pure CSS.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='QMjjzy' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Silent Movie Text Effect by Dimitra Vasilopoulou (@mimikos) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/redouglas\/pen\/gobsm\" target=\"_blank\" rel=\"noopener noreferrer\">Pure CSS Shimmer Text Effect<\/a><\/h2>\n<p>A smooth animated shimmering text effect, again in only pure CSS.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='gobsm' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen CSS Shimmer Text Effect by Robert Douglas (@redouglas) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/robin-dela\/pen\/KKPYoBq\" target=\"_blank\" rel=\"noopener noreferrer\">Fluid Text Hover<\/a><\/h2>\n<p>Very nice text effect that makes the background masked by the text flow fluidly with the mouse direction.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='KKPYoBq' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Fluid text hover by Robin Delaporte (@robin-dela) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/neilcarpenter\/pen\/LstCD\" target=\"_blank\" rel=\"noopener noreferrer\">Fly In, Fly Out<\/a><\/h2>\n<p>Simple but effective text effect where the letters fly in from the top and out through the bottom.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='LstCD' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Fly in, fly out by Neil Carpenter (@neilcarpenter) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/DonKarlssonSan\/pen\/XVxrGW\" target=\"_blank\" rel=\"noopener noreferrer\">Repellers<\/a><\/h2>\n<p>An interesting text effect in which the text repels away from the mouse movement.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='XVxrGW' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Repellers by Johan Karlsson (@DonKarlssonSan) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/dennisgarrn\/pen\/kHEKn\" target=\"_blank\" rel=\"noopener noreferrer\">3D Text Effect On Mousemove<\/a><\/h2>\n<p>Moving the mouse makes a cool 3D text effect in this example.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='kHEKn' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen 3d Text effect \u2013 mousemove by Dennis Garrn (@dennisgarrn) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/Moslim\/pen\/zwJPgL\" target=\"_blank\" rel=\"noopener noreferrer\">Cool Pure CSS Text Effect<\/a><\/h2>\n<p>A nice masked background animation.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='zwJPgL' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen (cool) text effect by Hakkam Abdullah (@Moslim) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/html5andblog\/pen\/ZWmYMy\" target=\"_blank\" rel=\"noopener noreferrer\">Bubbling Text Effect<\/a><\/h2>\n<p>A clean bubbling animation to use in headers or however you&#8217;d like, made with CSS and jQuery.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='ZWmYMy' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Bubbling Text Effect by html5andblog (@html5andblog) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/mandymichael\/pen\/aJLYVz\" target=\"_blank\" rel=\"noopener noreferrer\">Flickering Light Text Effect<\/a><\/h2>\n<p>This animation simulates a flickering light bulb within the text.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='aJLYVz' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Flickering Light Text Effect by Mandy Michael (@mandymichael) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/syropian\/pen\/bLzAi\" target=\"_blank\" rel=\"noopener noreferrer\">Matrix Text Effect<\/a><\/h2>\n<p>This one needs no introduction or explanation.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='bLzAi' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Matrix Text Effect by Collin Henderson (@syropian) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/sschepis\/pen\/uiHmr\" target=\"_blank\" rel=\"noopener noreferrer\">Opening Sequence<\/a><\/h2>\n<p>A smooth text effect that replicates the opening sequence of a movie or trailer.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='uiHmr' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Opening Sequence by Sebastian Schepis (@sschepis) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/chenxinnn\/pen\/qGKPOE\" target=\"_blank\" rel=\"noopener noreferrer\">Sliding Text Effect<\/a><\/h2>\n<p>A cool animation that responds to mouse movements.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='qGKPOE' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Sliding text effect by ChenXin_nth (@chenxinnn) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/GeorgePark\/pen\/jeBbGN\" target=\"_blank\" rel=\"noopener noreferrer\">Black Mirror Cracked Text Effect<\/a><\/h2>\n<p>An unusual effect that makes the text crack apart, done in pure CSS.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='jeBbGN' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Black Mirror Cracked Text Effect by George W. Park (@GeorgePark) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/maxnguyen\/pen\/BzneE\" target=\"_blank\" rel=\"noopener noreferrer\">Text Effect<\/a><\/h2>\n<p>Hover over the text to see an unusual effect.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='BzneE' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Text Effect by Max Nguyen (@maxnguyen) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/jonnyscholes\/pen\/QbKPdZ\" target=\"_blank\" rel=\"noopener noreferrer\">In\/Out of Focus Text Effect<\/a><\/h2>\n<p>Here&#8217;s another unusual pure CSS animated text effect.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='QbKPdZ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen In\/out of focus text effect by Jonny Scholes (@jonnyscholes) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/qkevinto\/pen\/WQVNWO\" target=\"_blank\" rel=\"noopener noreferrer\">Futuristic Resolving\/Typing Text Effect<\/a><\/h2>\n<p>Each letter rotates into position as it is typed in this interesting effect.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='WQVNWO' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Futuristic Resolving\/Typing Text Effect feat. GLaDOS by Kevin (@qkevinto) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/ashleynolan\/pen\/QwvKaw\" target=\"_blank\" rel=\"noopener noreferrer\">Shadow and Pattern Text Effects<\/a><\/h2>\n<p>Here&#8217;s a few hover effects in pure CSS.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='QwvKaw' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen A collection of CSS text-shadow and pattern effects by Ashley Watson-Nolan (@ashleynolan) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/carolineartz\/pen\/rNaGQYo\" target=\"_blank\" rel=\"noopener noreferrer\">Spotlight Cursor Text Screen<\/a><\/h2>\n<p>Very nicely done cursor-following effect.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='rNaGQYo' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Spotlight Cursor Text Screen by Caroline Artz (@carolineartz) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/lbebber\/pen\/EVxvWN\" target=\"_blank\" rel=\"noopener noreferrer\">Wave Text Effect (With SVG\/Blend Mode)<\/a><\/h2>\n<p>A relatively simple CSS only animated masked text effect using SVG with blend mode.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='EVxvWN' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Wave text effect (with SVG\/blend mode) by Lucas Bebber (@lbebber) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/tomncurry\/pen\/wXKReQ\" target=\"_blank\" rel=\"noopener noreferrer\">Particle Text Effect<\/a><\/h2>\n<p>A nice animation that you can control the speed by dragging your mouse over it.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='wXKReQ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Particle Text Effect by Tom (@tomncurry) on CodePen.<\/p>\n\n<h2><a href=\"https:\/\/codepen.io\/fabiowallner\/pen\/ozkoYo\" target=\"_blank\" rel=\"noopener noreferrer\">Glitch Text<\/a><\/h2>\n<p>A pure CSS glitchy text effect.<\/p>\n<p class='codepen'  data-height='600' data-theme-id='0' data-slug-hash='ozkoYo' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Glitch Text by Fabio (@fabiowallner) on CodePen.<\/p>\n\n<h2>How will you use these CSS text effects?<\/h2>\n<p>We hope you&#8217;ve enjoyed the creative examples we found and shared with you, and can use any of them in your projects. Be sure to check out our collections of <a href=\"https:\/\/1stwebdesigner.com\/tag\/css\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS code snippets<\/a> too!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In today&#8217;s post, we&#8217;re sharing some of the most interesting and unusual CSS text effects &#8211; some with the help of JavaScript &#8211; that we&#8217;ve found on CodePen for your inspiration as well as to possibly use in any of your upcoming projects. These examples range from animations, to hover interactions, to simply unique. Maybe<a class=\"excerpt-read-more\" href=\"https:\/\/1stwebdesigner.com\/css-text-effects\/\" title=\"Read25+ Interesting CSS Text Effects\">&#8230; Read more &raquo;<\/a><\/p>\n","protected":false},"author":486,"featured_media":155727,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3334],"tags":[3314,3343],"class_list":["post-155689","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-collections","tag-css","tag-typography"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>25+ Interesting CSS Text Effects - 1stWebDesigner - CSS Text Effects<\/title>\n<meta name=\"description\" content=\"Here are some of the most interesting and unusual CSS text effects - some with the help of JavaScript - that we&#039;ve found on CodePen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/1stwebdesigner.com\/css-text-effects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"25+ Interesting CSS Text Effects - 1stWebDesigner - CSS Text Effects\" \/>\n<meta property=\"og:description\" content=\"Here are some of the most interesting and unusual CSS text effects - some with the help of JavaScript - that we&#039;ve found on CodePen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/1stwebdesigner.com\/css-text-effects\/\" \/>\n<meta property=\"og:site_name\" content=\"1stWebDesigner\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/1stwebdesigner\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-21T15:00:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2020\/09\/css-text-effects.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1846\" \/>\n\t<meta property=\"og:image:height\" content=\"1846\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Editorial Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@1stwebdesigner\" \/>\n<meta name=\"twitter:site\" content=\"@1stwebdesigner\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Editorial Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/css-text-effects\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/css-text-effects\\\/\"},\"author\":{\"name\":\"Editorial Team\",\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/#\\\/schema\\\/person\\\/1f9a97bb030b9dd280d5cd6e5a2d211d\"},\"headline\":\"25+ Interesting CSS Text Effects\",\"datePublished\":\"2020-09-21T15:00:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/css-text-effects\\\/\"},\"wordCount\":2240,\"publisher\":{\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/css-text-effects\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/1stwebdesigner.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/css-text-effects.jpg\",\"keywords\":[\"CSS\",\"Typography\"],\"articleSection\":[\"Collections\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/css-text-effects\\\/\",\"url\":\"https:\\\/\\\/1stwebdesigner.com\\\/css-text-effects\\\/\",\"name\":\"25+ Interesting CSS Text Effects - 1stWebDesigner - CSS Text Effects\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/css-text-effects\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/css-text-effects\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/1stwebdesigner.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/css-text-effects.jpg\",\"datePublished\":\"2020-09-21T15:00:33+00:00\",\"description\":\"Here are some of the most interesting and unusual CSS text effects - some with the help of JavaScript - that we've found on CodePen.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/css-text-effects\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/1stwebdesigner.com\\\/css-text-effects\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/css-text-effects\\\/#primaryimage\",\"url\":\"https:\\\/\\\/1stwebdesigner.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/css-text-effects.jpg\",\"contentUrl\":\"https:\\\/\\\/1stwebdesigner.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/css-text-effects.jpg\",\"width\":1846,\"height\":1846,\"caption\":\"25+ Interesting CSS Text Effects\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/css-text-effects\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/1stwebdesigner.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"25+ Interesting CSS Text Effects\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/#website\",\"url\":\"https:\\\/\\\/1stwebdesigner.com\\\/\",\"name\":\"1stWebDesigner\",\"description\":\"Helping You Build a Better Web\",\"publisher\":{\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/1stwebdesigner.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/#organization\",\"name\":\"1stWebDesigner\",\"url\":\"https:\\\/\\\/1stwebdesigner.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/1stwebdesigner.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/1wd.jpg\",\"contentUrl\":\"https:\\\/\\\/1stwebdesigner.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/1wd.jpg\",\"width\":80,\"height\":80,\"caption\":\"1stWebDesigner\"},\"image\":{\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/1stwebdesigner\\\/\",\"https:\\\/\\\/x.com\\\/1stwebdesigner\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/1stwebdesigner\",\"https:\\\/\\\/pinterest.com\\\/1stwebdesigner\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/1stwebdesigner\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/1stwebdesigner.com\\\/#\\\/schema\\\/person\\\/1f9a97bb030b9dd280d5cd6e5a2d211d\",\"name\":\"Editorial Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6e107fc5dcc0aeb8d7c3a668c590aa4a478f2f2db802de55f3b9d5689eefb6ab?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6e107fc5dcc0aeb8d7c3a668c590aa4a478f2f2db802de55f3b9d5689eefb6ab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6e107fc5dcc0aeb8d7c3a668c590aa4a478f2f2db802de55f3b9d5689eefb6ab?s=96&d=mm&r=g\",\"caption\":\"Editorial Team\"},\"description\":\"We are 1stWebDesigner and we\u2019re on a mission to help you build a better web. Our team produces content created by web design professionals, for web design professionals.\",\"url\":\"https:\\\/\\\/1stwebdesigner.com\\\/author\\\/editorial-team\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"25+ Interesting CSS Text Effects - 1stWebDesigner - CSS Text Effects","description":"Here are some of the most interesting and unusual CSS text effects - some with the help of JavaScript - that we've found on CodePen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/1stwebdesigner.com\/css-text-effects\/","og_locale":"en_US","og_type":"article","og_title":"25+ Interesting CSS Text Effects - 1stWebDesigner - CSS Text Effects","og_description":"Here are some of the most interesting and unusual CSS text effects - some with the help of JavaScript - that we've found on CodePen.","og_url":"https:\/\/1stwebdesigner.com\/css-text-effects\/","og_site_name":"1stWebDesigner","article_publisher":"https:\/\/www.facebook.com\/1stwebdesigner\/","article_published_time":"2020-09-21T15:00:33+00:00","og_image":[{"width":1846,"height":1846,"url":"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2020\/09\/css-text-effects.jpg","type":"image\/jpeg"}],"author":"Editorial Team","twitter_card":"summary_large_image","twitter_creator":"@1stwebdesigner","twitter_site":"@1stwebdesigner","twitter_misc":{"Written by":"Editorial Team","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/1stwebdesigner.com\/css-text-effects\/#article","isPartOf":{"@id":"https:\/\/1stwebdesigner.com\/css-text-effects\/"},"author":{"name":"Editorial Team","@id":"https:\/\/1stwebdesigner.com\/#\/schema\/person\/1f9a97bb030b9dd280d5cd6e5a2d211d"},"headline":"25+ Interesting CSS Text Effects","datePublished":"2020-09-21T15:00:33+00:00","mainEntityOfPage":{"@id":"https:\/\/1stwebdesigner.com\/css-text-effects\/"},"wordCount":2240,"publisher":{"@id":"https:\/\/1stwebdesigner.com\/#organization"},"image":{"@id":"https:\/\/1stwebdesigner.com\/css-text-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2020\/09\/css-text-effects.jpg","keywords":["CSS","Typography"],"articleSection":["Collections"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/1stwebdesigner.com\/css-text-effects\/","url":"https:\/\/1stwebdesigner.com\/css-text-effects\/","name":"25+ Interesting CSS Text Effects - 1stWebDesigner - CSS Text Effects","isPartOf":{"@id":"https:\/\/1stwebdesigner.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/1stwebdesigner.com\/css-text-effects\/#primaryimage"},"image":{"@id":"https:\/\/1stwebdesigner.com\/css-text-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2020\/09\/css-text-effects.jpg","datePublished":"2020-09-21T15:00:33+00:00","description":"Here are some of the most interesting and unusual CSS text effects - some with the help of JavaScript - that we've found on CodePen.","breadcrumb":{"@id":"https:\/\/1stwebdesigner.com\/css-text-effects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/1stwebdesigner.com\/css-text-effects\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/1stwebdesigner.com\/css-text-effects\/#primaryimage","url":"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2020\/09\/css-text-effects.jpg","contentUrl":"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2020\/09\/css-text-effects.jpg","width":1846,"height":1846,"caption":"25+ Interesting CSS Text Effects"},{"@type":"BreadcrumbList","@id":"https:\/\/1stwebdesigner.com\/css-text-effects\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/1stwebdesigner.com\/"},{"@type":"ListItem","position":2,"name":"25+ Interesting CSS Text Effects"}]},{"@type":"WebSite","@id":"https:\/\/1stwebdesigner.com\/#website","url":"https:\/\/1stwebdesigner.com\/","name":"1stWebDesigner","description":"Helping You Build a Better Web","publisher":{"@id":"https:\/\/1stwebdesigner.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/1stwebdesigner.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/1stwebdesigner.com\/#organization","name":"1stWebDesigner","url":"https:\/\/1stwebdesigner.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/1stwebdesigner.com\/#\/schema\/logo\/image\/","url":"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2015\/12\/1wd.jpg","contentUrl":"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2015\/12\/1wd.jpg","width":80,"height":80,"caption":"1stWebDesigner"},"image":{"@id":"https:\/\/1stwebdesigner.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/1stwebdesigner\/","https:\/\/x.com\/1stwebdesigner","https:\/\/www.linkedin.com\/company\/1stwebdesigner","https:\/\/pinterest.com\/1stwebdesigner\/","https:\/\/www.youtube.com\/user\/1stwebdesigner"]},{"@type":"Person","@id":"https:\/\/1stwebdesigner.com\/#\/schema\/person\/1f9a97bb030b9dd280d5cd6e5a2d211d","name":"Editorial Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/6e107fc5dcc0aeb8d7c3a668c590aa4a478f2f2db802de55f3b9d5689eefb6ab?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6e107fc5dcc0aeb8d7c3a668c590aa4a478f2f2db802de55f3b9d5689eefb6ab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6e107fc5dcc0aeb8d7c3a668c590aa4a478f2f2db802de55f3b9d5689eefb6ab?s=96&d=mm&r=g","caption":"Editorial Team"},"description":"We are 1stWebDesigner and we\u2019re on a mission to help you build a better web. Our team produces content created by web design professionals, for web design professionals.","url":"https:\/\/1stwebdesigner.com\/author\/editorial-team\/"}]}},"_links":{"self":[{"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/posts\/155689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/users\/486"}],"replies":[{"embeddable":true,"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/comments?post=155689"}],"version-history":[{"count":4,"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/posts\/155689\/revisions"}],"predecessor-version":[{"id":155726,"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/posts\/155689\/revisions\/155726"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/media\/155727"}],"wp:attachment":[{"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/media?parent=155689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/categories?post=155689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/tags?post=155689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}