Circle Lightbox — a modern jQuery lightbox with circle animation, gradient, and morph effect 🔥

This is my custom jQuery plugin that transforms a regular image preview into an impressive fullscreen animation with a dynamic gradient, expanding circle effect, and smooth transition into a fullscreen image view.

I designed the project for:

• modern landing pages,
• portfolios,
• eCommerce stores,
• agency websites,
• product presentations,
• premium galleries,
• modern UI/UX projects.

The package includes:

• JS and CSS files,
• ready-to-use demo,
• full source code,
• easy configuration,
• gallery support,
• CSS animations,
• responsive design,
• keyboard support,
• Bootstrap and Font Awesome integration.

In the prepared demo, I showcase the complete functionality of the plugin along with a sample image gallery.

See video:

DEMO    |    DOWNLOAD

 

Why did I create my own lightbox?

For a long time, I was missing a solution that not only displays images fullscreen, but also creates a real “wow” effect during the opening animation.

Most lightboxes:

• simply fade in the background,
• display the image without any interesting transition,
• look very standard,
• do not provide a modern feeling.

I wanted to build something more dynamic.

That’s how Circle Lightbox was created — a plugin based on an animated circle, gradient background, and morphing effect.

 

How does Circle Lightbox work? 🚀

The entire animation was designed to resemble modern transitions known from mobile applications and premium UI interfaces.

The opening process works like this:

1. the user clicks a thumbnail,
2. a small circle appears from the center of the screen,
3. the circle dynamically expands,
4. the gradient begins animating,
5. the circle can smoothly morph into a fullscreen rectangle,
6. finally, the image appears with a bounce-in effect.

I also included the effect description directly inside the demo file.

 

Main plugin features

1. Animated fullscreen backdrop

The most characteristic element of the plugin is the backdrop generated using CSS animations.

The backdrop:

• starts as a small circle,
• expands to a massive size,
• covers the entire screen,
• can morph into a rectangle,
• contains an animated gradient.

Everything runs very smoothly thanks to carefully selected easing functions such as:

cubic-bezier(0.22, 1, 0.36, 1)

The animations were created in CSS using keyframes.

 

2. Morphing circle → fullscreen rectangle

One of the visual effects I really wanted to achieve was smooth shape morphing.

The animation works in two stages:

• first, a circle appears,
• then the circle transforms into a fullscreen rectangle.

This detail is exactly what makes the plugin look much more modern than classic lightboxes.

The effect can be enabled using:

morphToRect: true

I implemented the morphing logic both in CSS and JavaScript.

 

3. Dynamic gradient background 🎨

I didn’t want the background to feel static.

That’s why the backdrop uses:

background: linear-gradient(...)

along with an additional animation:

animation: clb-gradient-shift 6s ease-in-out infinite;

The gradient subtly moves all the time, creating a very modern visual effect.

 

4. Bounce-in effect for images

Once the backdrop animation finishes, the image appears with a bounce effect.

This makes the image:

• avoid appearing abruptly,
• have a more dynamic entrance,
• feel more natural,
• create a polished UI experience.

I created the animation using:

@keyframes clb-image-bounce-in

 

5. Gallery support

From the very beginning, I designed the plugin to fully support image galleries.

You simply use:

data-clb-gallery="demo"

This allows multiple independent galleries on the same page.

Inside the plugin, I implemented automatic gallery grouping.

 

6. Prev / next navigation

Circle Lightbox includes full gallery navigation.

I added:

• previous image button,
• next image button,
• cyclic navigation.

The functionality was implemented inside:

prev()
next()

 

7. Keyboard support ⌨️

The plugin also supports keyboard controls.

Available shortcuts:

• ESC — close,
• ← — previous image,
• → — next image.

Everything works through a keydown event listener.

 

8. Mobile responsiveness

From the start, it was important for me that the plugin worked perfectly on mobile devices.

That’s why I prepared:

• media queries,
• scalable buttons,
• responsive spacing,
• proper image scaling.

The responsive code is included directly in the plugin CSS.

 

9. Font Awesome integration

The plugin also supports Font Awesome icons.

You simply set:

useFontAwesome: true

Then the close button is rendered as:

<i class="fa fa-times"></i>

I implemented the support directly inside the plugin JavaScript.

 

Plugin installation

The implementation process is very simple.

First, include the CSS:

<link rel="stylesheet" href="/jquery.circle-lightbox.css" />

Then add jQuery:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

And finally the plugin itself:

<script src="/jquery.circle-lightbox.js"></script>

A complete implementation example is available inside the demo file.

 

Plugin initialization

I initialize the plugin in a very simple way: 

$('#demo-gallery').circleLightbox({
 colors: ['#322658', '#7664b3'],
 morphToRect: true,
 openDuration: 650
});

This makes it very easy to customize:

• gradient colors,
• animation timing,
• morphing behavior,
• icon integration.

The full configuration is available inside the plugin JavaScript code.

 

Available configuration options

The plugin includes several important options:

var defaults = {
 colors: ['#1a1a2e', '#16213e'],
 selector: 'a[href]',
 galleryAttr: 'data-clb-gallery',
 imageSelector: 'img',
 closeDuration: 380,
 openDuration: 600,
 morphToRect: true,
 useFontAwesome: false
};

This makes it easy to adapt the plugin to your own project.

 

What was most important to me while building it?

While developing the plugin, I mainly focused on:

• smooth animations,
• modern appearance,
• implementation simplicity,
• lightweight code,
• easy integration,
• great UX,
• responsiveness,
• full animation control.

I didn’t want to create a huge library filled with unnecessary features. My goal was to build a polished visual effect with a simple API.

 

Where can Circle Lightbox be used?

The plugin works perfectly for:

• portfolios,
• eCommerce stores,
• landing pages,
• agency websites,
• image galleries,
• product showcases,
• modern blogs,
• premium projects.

It looks especially good in minimalist layouts with large images and modern UI.

 

Summary

Circle Lightbox is my custom jQuery plugin created specifically for modern websites and visually impressive UI animations.

The biggest advantages of the plugin:

• animated fullscreen backdrop,
• expanding circle effect,
• circle → rectangle morphing,
• dynamic gradient,
• bounce-in image effect,
• gallery support,
• prev/next navigation,
• keyboard support,
• responsiveness,
• easy configuration,
• lightweight code,
• modern appearance.

If you’re looking for a lightweight, visually impressive, and modern lightbox for your website — Circle Lightbox was created exactly for that 🚀