Gradient animations with Tailwind CSS and SvelteKit
Tailwind is cool, right? Really configurable as well, I wanted to add some gradient animation to a project of mine. So did a search and found this awesome post by Victor Yoalli on how to do it! Thanks Victor!
I’ve basically taken Victor’s code and adjusted it for use with daisUI to apply to the effect to some text rather than to a div as with Victor’s example.
I’ll put this in an example project on GitHub so if you want to Tl;Dr and see the sauce you can skip to the end.
In this post I’ll create an example project using SvelteKit, Tailwind CSS and daisyUI.
By the way, this doesn’t need to be a SvelteKit project, or with Tailwind CSS. This is my preferred stack, but you can use whatever you like.
Spin up the project
It’s really convenient to get setup with a SvelteKit now, if you have node installed on your machine you can run the following command to get started:
pnpm create svelte gradient-animation-example
I’ll pick the following options, you can pick whatever you like, live your life! 😎
? Which Svelte app template? › - Use arrow-keys. Return to submit.
SvelteKit demo app
❯ Skeleton project - Barebones scaffolding for your new SvelteKit app
Library skeleton project
? Add type checking with TypeScript? › - Use arrow-keys. Return to submit.
Yes, using JavaScript with JSDoc comments
❯ Yes, using TypeScript syntax
No
? Add ESLint for code linting? › Yes
? Add Prettier for code formatting? › Yes
? Add Playwright for browser testing? › No
? Add Vitest for unit testing? › No
I’ll follow the rest of the instructions from the CLI output, if you take a look at the output there’s something handy on there I’ll be using shortly too!
Your project is ready!
✔ Typescript
Inside Svelte components, use <script lang="ts">
✔ ESLint
https://github.com/sveltejs/eslint-plugin-svelte3
✔ Prettier
https://prettier.io/docs/en/options.html
https://github.com/sveltejs/prettier-plugin-svelte#options
Install community-maintained integrations:
https://github.com/svelte-add/svelte-adders
Next steps:
1: cd gradient-animation-example
2: npm install (or pnpm install, etc)
3: git init && git add -A && git commit -m "Initial commit" (optional)
4: npm run dev -- --open
I use pnpm
as my package manager, so all the commands in this
example will be using that. If you’re using npm
or yarn
you’ll
need to adjust the commands accordingly.
Add Tailwind CSS with daisyUI
The handy thing I’m using from the CLI output is the svelte-add
I
can use it to add Tailwind CSS and daisyUI to my project. There’s
additional flags for --typography
and --forms
too for this example
I’ll just be using daisyUI.
npx svelte-add@latest tailwindcss --daisyui
Now, as I committed the changes after the initial project setup I can
take a look at what’s changed after running the svelte-add
command.
svelte-add
created a +layout.svelte
, app.postcss
,
postcss.config.cjs
and a tailwind.config.cjs
file for me, that’s
the Tailwind CSS setup done now!
I’ll rename the app.postcss
file to a regular CSS file.
# rename the file
mv src/app.postcss src/app.css
Then update the reference to it in the +layout.svelte
file.
<script>
+ import '../app.css';
- import '../app.postcss';
</script>
<slot />
Add the gradient animation
This is taken straight from Victor’s post, I’ve added the theme
config from this post to the tailwind.config.js
file.
const daisyui = require('daisyui')
const config = {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {
animation: {
'gradient-x': 'gradient-x 5s ease infinite',
'gradient-y': 'gradient-y 5s ease infinite',
'gradient-xy': 'gradient-xy 5s ease infinite',
},
keyframes: {
'gradient-y': {
'0%, 100%': {
'background-size': '400% 400%',
'background-position': 'center top',
},
'50%': {
'background-size': '200% 200%',
'background-position': 'center center',
},
},
'gradient-x': {
'0%, 100%': {
'background-size': '200% 200%',
'background-position': 'left center',
},
'50%': {
'background-size': '200% 200%',
'background-position': 'right center',
},
},
'gradient-xy': {
'0%, 100%': {
'background-size': '400% 400%',
'background-position': 'left center',
},
'50%': {
'background-size': '200% 200%',
'background-position': 'right center',
},
},
},
},
},
plugins: [daisyui],
}
module.exports = config
This means that I can now use any of the gradient-x
,gradient-y
or
gradient-xy
classes in the project. So I’ll go ahead and do that
now!
So, going back to Victor’s post, and the explanation he gives there,
the three classes created here are for, one moving on the horizontal
axis (gradient-x
). One moving on the vertical axis (gradient-y
),
and the last one moving on the diagonal axis (gradient-xy
).
Use the gradient classes in some markup
That’s it! Now let’s add them to some markup on +page.svelte
.
I want the text to have the gradient and not the background, so I’ll
use the Tailwind bg-clip-text
and bg-clip-text text-transparent
classes to do that. Then I can apply a gradient to the text using the
bg-gradient-to-r
class.
And for the colours I’ll use the daisyUI classes from-primary
,
to-secondary
, via-accent
to cycle through the colours in the
theme.
<h1
class="bg-clip-text text-transparent bg-gradient-to-tr from-primary to-secondary via-accent animate-gradient-xy"
>
Tailwind Gradient Text
</h1>
<p
class="bg-clip-text text-transparent bg-gradient-to-br from-primary to-secondary via-accent animate-gradient-y"
>
This animation is on the vertical axis
</p>
<p
class="bg-clip-text text-transparent bg-gradient-to-tl from-primary to-secondary via-accent animate-gradient-x"
>
This animation is on the horizontal axis
</p>
Then finally, I’ll can add in a wrapping element and add in some font styles.
<div class="flex flex-col items-center justify-center h-screen">
<h1
class="bg-clip-text text-transparent bg-gradient-to-tr from-primary to-secondary via-accent animate-gradient-xy font-extrabold text-6xl md:text-9xl py-8"
>
Tailwind Gradient Text
</h1>
<p
class="bg-clip-text text-transparent bg-gradient-to-br from-primary to-secondary via-accent animate-gradient-y font-extrabold text-3xl md:text-6xl py-8"
>
This animation is on the vertical axis
</p>
<p
class="bg-clip-text text-transparent bg-gradient-to-tl from-primary to-secondary via-accent animate-gradient-x font-extrabold text-3xl md:text-6xl py-8"
>
This animation is on the horizontal axis
</p>
</div>
And that it! A nice little gradient animation on some text.
Conclusion
If you want to check out the code for it I’ve put the example over on GitHub if you want to take a look at it.
I hope you enjoyed this post, and that you found it useful. If you did please consider sharing it on the socials! 😊
There's a reactions leaderboard you can check out too.
Analytics Information