{"id":3112,"date":"2016-10-23T13:08:40","date_gmt":"2016-10-23T03:08:40","guid":{"rendered":"http:\/\/codemyui.com\/?p=3112"},"modified":"2019-01-08T10:59:24","modified_gmt":"2019-01-07T23:59:24","slug":"gradient-text-drop-shadow-effect","status":"publish","type":"post","link":"https:\/\/codemyui.com\/gradient-text-drop-shadow-effect\/","title":{"rendered":"Gradient Text With Drop Shadow Effect"},"content":{"rendered":"<p>This an awesome <a href=\"https:\/\/codemyui.com\/category\/text-animation\/\">text effect<\/a> where you can add a gradient color to the text with a little drop shadow. If you are looking to add some captivating text effect to the <a href=\"https:\/\/codemyui.com\/tag\/hero-section\/\">hero section<\/a> on your site then this is exactly what you need. This is designed by <a href=\"https:\/\/twitter.com\/CSSBites\" target=\"_blank\" rel=\"noopener\">Jase<\/a> using <a href=\"https:\/\/codemyui.com\/tag\/pure-css\/\">pure CSS<\/a>. <\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/2d50b14baf5b269c2e0509c0e7438024\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='468' data-theme-id='0' data-slug-hash='ALBgKL' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Gradient Text w\/Drop Shadow by Jase (@jasesmith) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This an awesome text effect where you can add a gradient color to the text with a little drop shadow. If you are looking to add some captivating text effect to the hero section on your site then this is exactly what you need. This is designed by Jase using pure CSS.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/gradient-text-drop-shadow-effect\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":26802,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[751135,608602281,1512930],"class_list":["post-3112","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-gradient","tag-shadow","tag-text-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/There_is_nothing_noble_about_being_superior_to_your_fellow_man__True_nobility_comes_from_being_superior_to_ones_former_self.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":13835,"url":"https:\/\/codemyui.com\/flickering-neon-text-animation\/","url_meta":{"origin":3112,"position":0},"title":"Flickering Neon Text Animation","author":"Hima Vincent","date":"March 22, 2017","format":false,"excerpt":"If you are running a landing page for a games or pub site you might love this neon text with flickering text effect. This effect was designed by Jase. This is another hero section text animation like adding long shadow, gradient, outline that you can use on your websites. If\u2026","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-effect\/"},"img":{"alt_text":"Neon Text with Flickering Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/neon-text-with-flickering-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/neon-text-with-flickering-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/neon-text-with-flickering-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/neon-text-with-flickering-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26556,"url":"https:\/\/codemyui.com\/colorful-gradient-long-shadow\/","url_meta":{"origin":3112,"position":1},"title":"Colorful Gradient Long Shadow","author":"Saijo George","date":"June 29, 2018","format":false,"excerpt":"A colourful long shadow text animation that slides into view on click designed by Fabio Ottaviani. If you are having trouble with the pen, try the archived copy on GitHub Colorful Gradient Long Shadow Snippet","rel":"","context":"In \"shadow\"","block_context":{"text":"shadow","link":"https:\/\/codemyui.com\/tag\/shadow\/"},"img":{"alt_text":"Colorful Gradient Long Shadow","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Colorful-Gradient-Long-Shadow.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Colorful-Gradient-Long-Shadow.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Colorful-Gradient-Long-Shadow.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Colorful-Gradient-Long-Shadow.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":18,"url":"https:\/\/codemyui.com\/colourful-long-shadow-text-effect\/","url_meta":{"origin":3112,"position":2},"title":"Colourful Long Shadow Text Effect","author":"Hima Vincent","date":"May 20, 2016","format":false,"excerpt":"Colourful long shadow effect for text that will look great in the hero section of your web projects. Designed by\u00a0 DarioCorsi.If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"shadow\"","block_context":{"text":"shadow","link":"https:\/\/codemyui.com\/tag\/shadow\/"},"img":{"alt_text":"Colourful Long Shadow Text Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/colourful-long-shadow-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/colourful-long-shadow-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/colourful-long-shadow-text-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/colourful-long-shadow-text-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":14379,"url":"https:\/\/codemyui.com\/animated-gradient-text-effect\/","url_meta":{"origin":3112,"position":3},"title":"Animated Gradient Text Effect","author":"Hima Vincent","date":"March 30, 2017","format":false,"excerpt":"This is an animated gradient text effect in pure CSS designed by Shaw. If you are having trouble with the pen, try the archived copy on GitHub xxx Snippet","rel":"","context":"In \"gradient\"","block_context":{"text":"gradient","link":"https:\/\/codemyui.com\/tag\/gradient\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/animated-gradient-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/animated-gradient-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/animated-gradient-text-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/animated-gradient-text-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25262,"url":"https:\/\/codemyui.com\/text-field-gradient-border-focus\/","url_meta":{"origin":3112,"position":4},"title":"Text Field Gradient Border on Focus","author":"Saijo George","date":"December 14, 2017","format":false,"excerpt":"Here is a fancy focus effect for a text field designed by Rik Schennink. When you focus on the rounded text field by clicking on it the gradient border feathers out giving it a very cool look. If you are having trouble with the pen, try the archived copy on\u2026","rel":"","context":"In \"gradient\"","block_context":{"text":"gradient","link":"https:\/\/codemyui.com\/tag\/gradient\/"},"img":{"alt_text":"Text Field Gradient Border on Focus","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/text-field-gradient-border-on-focus.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/text-field-gradient-border-on-focus.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/text-field-gradient-border-on-focus.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/text-field-gradient-border-on-focus.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30256,"url":"https:\/\/codemyui.com\/gradient-blur-text-effect-in-pure-css\/","url_meta":{"origin":3112,"position":5},"title":"Gradient Blur Text Effect in Pure CSS","author":"Hima Vincent","date":"May 31, 2021","format":false,"excerpt":"Code by:\u00a0hzlo If you are having trouble with the pen, try the archived copy on\u00a0GitHub. Gradient Blur Text Snippet","rel":"","context":"In \"blur effect\"","block_context":{"text":"blur effect","link":"https:\/\/codemyui.com\/tag\/blur-effect\/"},"img":{"alt_text":"Gradient Blur Text Effect in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Gradient-Blur-Text-Effect-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Gradient-Blur-Text-Effect-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Gradient-Blur-Text-Effect-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Gradient-Blur-Text-Effect-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/3112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=3112"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/3112\/revisions"}],"predecessor-version":[{"id":26023,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/3112\/revisions\/26023"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/26802"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=3112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=3112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=3112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}