--- title: TailwindCSS Gradients | daily.dev description: Learn how to easily add gradients to your designs using TailwindCSS, with options for starting color, ending color, and middle color. Gradients can also be... canonical: https://daily.dev/posts/tailwindcss-gradients-t4kr3i0pg twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: TailwindCSS Gradients | daily.dev og:description: Learn how to easily add gradients to your designs using TailwindCSS, with options for starting color, ending color, and middle color. Gradients can also be... og:url: https://daily.dev/posts/tailwindcss-gradients-t4kr3i0pg og:image: https://api.daily.dev/og/posts/T4kr3I0PG.png og:image:alt: TailwindCSS Gradients og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # TailwindCSS Gradients **[Community Picks](https://daily.dev/sources/community)** 路 3 min read 路 208 upvotes 路 9 comments ## Summary Learn how to easily add gradients to your designs using TailwindCSS, with options for starting color, ending color, and middle color. Gradients can also be applied to text elements. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@robertoumbelino** 路 3 upvotes > Nice article, I didn't know it was possible to use gradients in text, I liked it a lot and is too easy to apply gradient with tailwind. 馃槏 **@raqibnur** 路 1 upvotes > Nice Article **@jolenek** 路 0 upvotes > Cool - I didn't know you could do diagonal gradients! I'll definitely be using this! **@bando** 路 0 upvotes > Tailwind keeps on giving. **@devmount** 路 0 upvotes > Ah, seems like this article isn't available anymore. Here is the direct link to the docs: > [https://tailwindcss.com/docs/background-image#setting-gradient-color-stops](https://tailwindcss.com/docs/background-image#setting-gradient-color-stops) > > > I learned about conic-gradients there 馃槆 --- Tags: [#css](https://daily.dev/tags/css), [#tailwind-css](https://daily.dev/tags/tailwind-css) [View this post on daily.dev](https://daily.dev/posts/tailwindcss-gradients-t4kr3i0pg) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"TailwindCSS Gradients","url":"https://daily.dev/posts/tailwindcss-gradients-t4kr3i0pg","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/tailwindcss-gradients-t4kr3i0pg"},"datePublished":"2024-05-18T07:06:23.086Z","dateModified":"2024-05-18T07:06:21.930Z","description":"Learn how to easily add gradients to your designs using TailwindCSS, with options for starting color, ending color, and middle color. Gradients can also be...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/128121f4763577e8b261053e6aff17e9?_a=AQAEuiZ","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/128121f4763577e8b261053e6aff17e9?_a=AQAEuiZ","isAccessibleForFree":true,"articleSection":"Community Picks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":9,"discussionUrl":"https://daily.dev/posts/tailwindcss-gradients-t4kr3i0pg","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":208},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":9}],"keywords":"css,tailwind-css","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"TailwindCSS Gradients"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/tailwindcss-gradients-t4kr3i0pg","comment":[{"@type":"Comment","text":"Nice article, I didn鈥檛 know it was possible to use gradients in text, I liked it a lot and is too easy to apply gradient with tailwind. 馃槏","datePublished":"2024-05-18T13:11:14.941Z","url":"https://daily.dev/posts/T4kr3I0PG#c-ijfaormts","author":{"@type":"Person","name":"Roberto Umbelino","url":"https://daily.dev/robertoumbelino","image":"https://avatars.githubusercontent.com/u/17939056?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Nice Article","datePublished":"2024-05-23T08:17:32.652Z","url":"https://daily.dev/posts/T4kr3I0PG#c-Y06f7sqt2","author":{"@type":"Person","name":"raqib nur","url":"https://daily.dev/raqibnur","image":"https://media.daily.dev/image/upload/s--seLSoAVy--/f_auto/v1736312346/avatars/avatar_r-mKekZy5"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Cool - I didn鈥檛 know you could do diagonal gradients! I鈥檒l definitely be using this!","datePublished":"2024-05-22T12:19:01.513Z","url":"https://daily.dev/posts/T4kr3I0PG#c-wTeJWuXBE","author":{"@type":"Person","name":"Jolene Kearse","url":"https://daily.dev/jolenek","image":"https://media.daily.dev/image/upload/s--hzXedQCA--/f_auto/v1721913049/avatars/avatar_uquWdygd7S7azFvRNHB8n"}},{"@type":"Comment","text":"Tailwind keeps on giving.","datePublished":"2024-08-08T01:53:57.890Z","url":"https://daily.dev/posts/T4kr3I0PG#c-3tNOE6Jcn","author":{"@type":"Person","name":"Matt","url":"https://daily.dev/bando","image":"https://media.daily.dev/image/upload/s--3Zr6IX0T--/f_auto/v1723395699/avatars/avatar_BiAN0wA5vrAwldXAx7dnI"}},{"@type":"Comment","text":"Ah, seems like this article isn鈥檛 available anymore. Here is the direct link to the docs:\nhttps://tailwindcss.com/docs/background-image#setting-gradient-color-stops\nI learned about conic-gradients there 馃槆","datePublished":"2026-07-06T22:51:18.136Z","url":"https://daily.dev/posts/T4kr3I0PG#c-QP2qRWwjp","author":{"@type":"Person","name":"Andreas","url":"https://daily.dev/devmount","image":"https://media.daily.dev/image/upload/s--0yHQgkD3--/f_auto/v1730121566/avatars/avatar_wkPuMtV83z5WseTrVc5QU"}}]} ```