--- title: Aura 200+ Layered CSS Gradients That Feel Like Ligh description: Aura is an open-source library of over 200 layered CSS gradients built with blend modes to create an organic, ambient glow effect instead of flat linear... canonical: https://daily.dev/posts/aura-200-layered-css-gradients-that-feel-like-ligh-psr5yvua1 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Aura 200+ Layered CSS Gradients That Feel Like Ligh | daily.dev og:description: Aura is an open-source library of over 200 layered CSS gradients built with blend modes to create an organic, ambient glow effect instead of flat linear... og:url: https://daily.dev/posts/aura-200-layered-css-gradients-that-feel-like-ligh-psr5yvua1 og:image: https://api.daily.dev/og/posts/PSR5yvuA1.png og:image:alt: Aura 200+ Layered CSS Gradients That Feel Like Ligh 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. # Aura 200+ Layered CSS Gradients That Feel Like Ligh **[All ShadCN](https://daily.dev/sources/allshadcn)** · [@cristianolivera1](https://daily.dev/cristianolivera1) · 1 min read · 59 upvotes · 8 comments ## Summary Aura is an open-source library of over 200 layered CSS gradients built with blend modes to create an organic, ambient glow effect instead of flat linear gradients. It includes a live editor for tweaking layers, blur, opacity, and film grain, plus export options for CSS, Tailwind, CSS Variables, CSS-in-JS, PNG/SVG assets, or an AI prompt. Built with Next.js, React, Tailwind, and TypeScript, and free to use in any project. ## Content I put together **Aura**, an open-source tool with a collection of over 200 layered gradients that use CSS blend modes to create an organic, ambient light effect. The main idea was to move away from flat, linear gradients and build something that feels more natural behind web interfaces. **What you can do with it:** - **Quick preview:** Just hover over any card to see the full page adopt its glow (supports both light and dark themes). - **Live editor:** You can tweak everything right in the browser—add or reorder layers, change blend modes, adjust blur, opacity, or toggle an analog film grain effect. - **Flexible export:** Copy the code as pure CSS, Tailwind, CSS Variables, or CSS-in-JS. It also lets you download the assets as PNG/SVG, or copy an AI prompt to rebuild them in your prompt workflows. It is built with Next.js, React, Tailwind, and TypeScript. Fully free and open source. If you want to check it out or use it in your projects: **Code:** [https://github.com/CristianOlivera1/Aura](https://github.com/CristianOlivera1/Aura) ## Community discussion Top comments from developers on daily.dev. **@sgattix** · 6 upvotes > Good job man. I think that the fact that you didn't choose a framework or force a style engine makes me think that you put some serious effort on architectural choices instead of just creating another react component libary. **@mishatvoy** · 4 upvotes > This looks really smooth! > > Would be cool to see some animated ones in the mix as well, but honestly, that’s not a huge issue - they’d probably be pretty easy to add yourself > Great work! **@agustinbarrientos** · 1 upvotes > Can the gallery respect prefers-reduced-motion? Two hundred animated previews at once sounds rough **@agustinbarrientos** · 1 upvotes > Can the gallery respect prefers-reduced-motion? Two hundred animated previews at once sounds rough ## Similar posts on daily.dev - [CSS Optical Illusions](https://daily.dev/posts/css-optical-illusions-w8odlyck4) · Hacker News · 5 upvotes · 1 comments --- Tags: [#css](https://daily.dev/tags/css), [#nextjs](https://daily.dev/tags/nextjs), [#ui-design](https://daily.dev/tags/ui-design), [#tailwind-css](https://daily.dev/tags/tailwind-css) [View this post on daily.dev](https://daily.dev/posts/aura-200-layered-css-gradients-that-feel-like-ligh-psr5yvua1) ```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":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/aura-200-layered-css-gradients-that-feel-like-ligh-psr5yvua1","headline":"Aura 200+ Layered CSS Gradients That Feel Like Ligh","text":"Aura is an open-source library of over 200 layered CSS gradients built with blend modes to create an organic, ambient glow effect instead of flat linear gradients. It includes a live editor for tweaking layers, blur, opacity, and film grain, plus export options for CSS, Tailwind, CSS Variables, CSS-in-JS, PNG/SVG assets, or an AI prompt. Built with Next.js, React, Tailwind, and TypeScript, and free to use in any project.","url":"https://daily.dev/posts/aura-200-layered-css-gradients-that-feel-like-ligh-psr5yvua1","datePublished":"2026-08-14T05:31:58.847Z","dateModified":"2026-09-13T21:19:10.015Z","author":{"@type":"Person","name":"Cristian Olivera Chávez","url":"https://daily.dev/cristianolivera1","image":"https://lh3.googleusercontent.com/a/ACg8ocICzd1bW91kCFqI0PuT1IRi9n8e6m7C2_QMCxE2xLrx7d2Q5tY=s96-c","description":"Angular | NextJs | Tailwind | Laravel | Spring Boot","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":4890}},"image":"https://media.daily.dev/image/upload/s--7z85VN_H--/f_auto/v1786625942/posts/A6j00YFcx?_a=BAMAMicg0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":59},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":8}],"comment":[{"@type":"Comment","text":"Good job man. I think that the fact that you didn’t choose a framework or force a style engine makes me think that you put some serious effort on architectural choices instead of just creating another react component libary.","datePublished":"2026-08-14T07:40:40.447Z","url":"https://daily.dev/posts/PSR5yvuA1#c-FhMbKNAOS","author":{"@type":"Person","name":"Alessandro Sgattoni","url":"https://daily.dev/sgattix","image":"https://avatars.githubusercontent.com/u/81874177?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":6}},{"@type":"Comment","text":"This looks really smooth!\nWould be cool to see some animated ones in the mix as well, but honestly, that’s not a huge issue - they’d probably be pretty easy to add yourself\nGreat work!","datePublished":"2026-08-14T10:56:32.375Z","url":"https://daily.dev/posts/PSR5yvuA1#c-McsWvH70N","author":{"@type":"Person","name":"Mikhail","url":"https://daily.dev/mishatvoy","image":"https://avatars.githubusercontent.com/u/74988200?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"Can the gallery respect prefers-reduced-motion? Two hundred animated previews at once sounds rough","datePublished":"2026-08-16T02:42:33.923Z","url":"https://daily.dev/posts/PSR5yvuA1#c-bJeTEI7Fb","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Can the gallery respect prefers-reduced-motion? Two hundred animated previews at once sounds rough","datePublished":"2026-08-16T02:56:51.094Z","url":"https://daily.dev/posts/PSR5yvuA1#c-qVjizkm74","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/allshadcn","name":"All ShadCN"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"All ShadCN","item":"https://daily.dev/squads/allshadcn"},{"@type":"ListItem","position":3,"name":"Aura 200+ Layered CSS Gradients That Feel Like Ligh"}]} ```