Home

Library

Code components

A ripple background effect in light theme
A ripple background effect in light theme
A ripple background effect in light theme

Last updated on:

Ripple background

Hover over the grids for the hover effect and click through the grid for triggering the ripple effect. Use it as a responsive background in the hero or call to action sections.

0

0

Variants:

1

The ripple effect, color, speed, and all are customizable.


Please note: This component is available only for active license holders. Sign in with your license key or purchase one.

Sign in

Copying disabled

Preview the component

How to use the component?

  • Copy and paste this code component to your Framer canvas.

  • Adjust the hover, click, and ripple interaction colors as you wish.

  • Also, adjust the size of the component.

  • For the best practice, for sizing, use "Fill" for the length and "Fixed" for the height.

  • Unable to copy this component? Make sure you're signed in. If not Sign in may required.

LIMITED TIME OFFER

Launch amazing websites with

Framerstacks

Still trying to design and launch a website from scratch? Check out 800+ pre build Framer components and sections.

Life time access

Save hundreds of hours

Weekly new releases

Premium designs

Color theme responsiveness

Starts from

$79.00

$99

One-time

Buy now

Ripple background

Hover over the grids for the hover effect and click through the grid for triggering the ripple effect. Use it as a responsive background in the hero or call to action sections.

0

0

Variants:

1

The ripple effect, color, speed, and all are customizable.


Please note: This component is available only for active license holders. Sign in with your license key or purchase one.

Sign in

Copying disabled

Preview the component

How to use the component?

  • Copy and paste this code component to your Framer canvas.

  • Adjust the hover, click, and ripple interaction colors as you wish.

  • Also, adjust the size of the component.

  • For the best practice, for sizing, use "Fill" for the length and "Fixed" for the height.

  • Unable to copy this component? Make sure you're signed in. If not Sign in may required.

LIMITED TIME OFFER

Launch amazing websites with

Framerstacks

Still trying to design and launch a website from scratch? Check out 800+ pre build Framer components and sections.

Life time access

Save hundreds of hours

Weekly new releases

Premium designs

Color theme responsiveness

Starts from

$79.00

$99

One-time

Buy now

Ripple background

Hover over the grids for the hover effect and click through the grid for triggering the ripple effect. Use it as a responsive background in the hero or call to action sections.

0

0

Variants:

1

The ripple effect, color, speed, and all are customizable.


Please note: This component is available only for active license holders. Sign in with your license key or purchase one.

Sign in

Copying disabled

Preview the component

How to use the component?

  • Copy and paste this code component to your Framer canvas.

  • Adjust the hover, click, and ripple interaction colors as you wish.

  • Also, adjust the size of the component.

  • For the best practice, for sizing, use "Fill" for the length and "Fixed" for the height.

  • Unable to copy this component? Make sure you're signed in. If not Sign in may required.

LIMITED TIME OFFER

Launch amazing websites with

Framerstacks

Still trying to design and launch a website from scratch? Check out 800+ pre build Framer components and sections.

Life time access

Save hundreds of hours

Weekly new releases

Premium designs

Color theme responsiveness

Starts from

$79.00

$99

One-time

Buy now

Just like more components

A hashtag generator component interface in light theme.

Hashtag generator

Jan 30, 2026

Copy

0

A hashtag generator component interface in light theme.

Hashtag generator

Jan 30, 2026

Copy

0

framerstacks qr code in light theme

QR code generator

Jan 13, 2026

Copy

0

framerstacks qr code in light theme

QR code generator

Jan 13, 2026

Copy

0

a listed blog index page in light theme

Item counter

Jan 10, 2026

Copy

0

a listed blog index page in light theme

Item counter

Jan 10, 2026

Copy

0

A chat bot ui design in light theme

Chat bot for Framer

Dec 25, 2025

Copy

1

A chat bot ui design in light theme

Chat bot for Framer

Dec 25, 2025

Copy

1

Video text masker in light theme

Video text masker

Dec 22, 2025

Copy

1

Video text masker in light theme

Video text masker

Dec 22, 2025

Copy

1

A light themed 3d calendar demo

Content scheduler

Dec 22, 2025

Copy

1

A light themed 3d calendar demo

Content scheduler

Dec 22, 2025

Copy

1

A light themed 3D title card

3D title card

Dec 14, 2025

Copy

1

A light themed 3D title card

3D title card

Dec 14, 2025

Copy

1

Framerstacks as a text scrambler with a light background.

Text scrambler

Dec 13, 2025

Copy

1

Framerstacks as a text scrambler with a light background.

Text scrambler

Dec 13, 2025

Copy

1

floating starts on a light background.

Floating stars

Dec 12, 2025

Copy

1

floating starts on a light background.

Floating stars

Dec 12, 2025

Copy

1

Load More

The FAQs

Have questions? We got you…

Everything you need to know about our product and billing.

What is Framerstack?

What is Framerstack?

Is there a free plan available?

Is there a free plan available?

What about the refund policy?

What about the refund policy?

How I can avail my user license?

How I can avail my user license?

Still have questions? Or can't find the right answer? Please contact us. One of our customer support team members will get in touch with you.

Contact us

Join to the community

Stay in the loop with everything you need to know.

By clicking Submit, you agree to our Privacy Policy and to receive our notifications. You can Unsubscribe anytime.

By clicking Submit, you agree to our Privacy Policy and to receive our notifications. You can Unsubscribe anytime.

By clicking Submit, you agree to our Privacy Policy and to receive our notifications. You can Unsubscribe anytime.