How many gradients snippets are available?

This page lists 9 curated examples. New community Tailwind components are added regularly.

Can I use snippets commercially?

Yes — all snippets are MIT licensed for personal and commercial projects without attribution.

Looking for Tailwind versions?

See Tailwind components tagged "gradients" at /tailwind/tag/gradients.

#gradients — 9 Free Code Snippets

#gradients#background+2

Awesome neumorphism calendar design with gradient background

Add a utility to your UI with Awesome neumorphism calendar design with gradient background. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

4.6kView snippet

#animation#gradients+1

Beautiful Animated Border Gradient with pure CSS

Beautiful Animated Border Gradient with pure CSS — a free Bootstrap 5 utility snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.

8.3kView snippet

#card#gradients+2

Card Border gradient animation with pure CSS

Free Bootstrap 5 card snippet — Card Border gradient animation with pure CSS. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

5.6kView snippet

#pagination#background+1

Pagination example with pure CSS

Pagination example with pure CSS — a free Bootstrap 5 utility snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.

2.4kView snippet

#pagination#background+1

Pagination with pure CSS

Pagination with pure CSS: a hand-crafted, open-source Bootstrap 5 utility. HTML & CSS included, ready to copy.

1.1kView snippet

#counter#gradients

Awesome Countdown for New Year

Awesome Countdown for New Year: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.

1.6kView snippet

#gradients#typography+2

Apply Gradient Animation to Text with pure CSS

Free Bootstrap 5 utility snippet — Apply Gradient Animation to Text with pure CSS. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

2.6kView snippet

#responsive#navbar+3

Responsive Navbar design with gradient effect on hover

Add a navbar to your UI with Responsive Navbar design with gradient effect on hover. Free Bootstrap 5 code — HTML, CSS & JS ready to copy, MIT licensed.

3.8kView snippet

#buttons#gradients+1

Mouse cursor gradient tracking on hover with pure CSS

Free Bootstrap 5 button snippet — Mouse cursor gradient tracking on hover with pure CSS. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.

3.6kView snippet

Awesome neumorphism calendar design with gradient background

Beautiful Animated Border Gradient with pure CSS