Home
Tofayel Islam
Ripple Animation

Ripple Animation

Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

This tailwind example is contributed by Tofayel Islam, on 25-Dec-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card Other

Author Tofayel Islam

15

Fork Fullscreen

<div class="w-full h-screen relative overflow-hidden py-20 bg-black dark:bg-black">
  <div class="absolute w-full inset-0 flex items-center justify-center">
    <div
      class="absolute animate-ripple rounded-full z-10 bg-cover bg-no-repeat bg-center bg-[url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxwZXJzb258ZW58MHwwfHx8MTc0MzMyNzEzNHww&ixlib=rb-4.0.3&q=80&w=1080')] outline outline-offset-2 outline-blue-300 dark:outline-gray-600 shadow-xl border [--i:0] w-[180px] h-[180px] opacity-1 [animation-delay:0s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-green-200 shadow-xl border [--i:1] w-[250px] h-[250px] opacity-[0.17] [animation-delay:0.06s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-green-400 shadow-xl border [--i:2] w-[320px] h-[320px] opacity-[0.14] [animation-delay:0.12s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-green-400 shadow-xl border [--i:3] w-[390px] h-[390px] opacity-[0.11000000000000001] [animation-delay:0.18s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-green-400 shadow-xl border [--i:4] w-[460px] h-[460px] opacity-[0.08000000000000002] [animation-delay:0.24s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-green-400 shadow-xl border [--i:5] width:530px;height:530px;opacity:0.05000000000000002;animation-delay:0.3s;border-style:solid;border-width:1px;border-color:hsl(var(--foreground), 0.3);top:50%;left:50%;transform:translate(-50%, -50%) scale(1)">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-green-400 shadow-xl border [--i:6] w-[600px] h-[600px] opacity-[0.020000000000000018] [animation-delay:0.36s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-green-400 shadow-xl border [--i:7] w-[670px] h-[670px] opacity-[-0.009999999999999981] [animation-delay:0.42s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-green-400 shadow-xl border [--i:8] w-[740px] h-[740px] opacity-[-0.03999999999999998] [animation-delay:0.48s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-green-400 shadow-xl border [--i:9] w-[810px] h-[810px] opacity-[-0.07] [animation-delay:0.54s] border-dashed border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
  </div>
</div>

Related Examples

Responsive Feature Card

Author:
Gopi Yadav

3 years ago

13.3k
Interactive Game Flip Card – Pure HTML & CSS Component
An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

970
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

2 years ago

11.1k
Simple Payment Successfull Notification Page

Author:
Anonymous

7 months ago

1.3k
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

1 year ago

2.3k
rotate card
rotate card

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.7k
User Feedback Card
A responsive user feedback card that displays user information, their role, and a testimonial. The card is styled using Tailwind CSS for a clean and modern look.

Author:
Anum Shahana

1 year ago

1.4k
Cards Seaction - Services block

Author:
ABDO-SY

9 months ago

1.4k
Shoping Cart Popup

Author:
ABDO-SY

9 months ago

968
Blog post cards
responsive blog post cards

Author:
Mr Robot

2 years ago

12.5k
Todo List
A simple tool to track tasks: add, edit, complete, or delete items to stay organized daily.

Author:
Muzammil Riaz

7 months ago

742
Product card

Author:
Simon Scheffer

3 years ago

31.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12