Creates an interactive grid background where clicking creates ripple waves that expand outward. Each cell responds to hover with color changes and click with animated wave propagation. Customize grid density, cell colors, and ripple behavior. Features optional fade effects from edges. Perfect for hero sections, full-screen backgrounds, or adding dynamic visual interest.

Ripple Grid

Click anywhere to create ripple waves across the grid.

Grid Layout

Grid Rows Few to Many

Number of horizontal rows in the grid. Lower creates a sparse, open pattern. Higher produces a dense, detailed grid.

Default: 8 rows

Grid Columns Few to Many

Number of vertical columns in the grid. Lower creates wider cells. Higher produces more detailed horizontal density.

Default: 27 columns

Cell Size Small to Large

Size of individual grid cells. Smaller creates fine, detailed patterns. Larger makes bold, prominent cells. Automatically adjusts for mobile devices.

Default: Medium (56px)

Cell Colors

Border Color Color picker

Color of lines between grid cells. Creates the grid structure and defines cell boundaries.

Default: Light gray

Cell Background Color picker

Default color filling each grid cell when inactive.

Default: Light gray

Cell Opacity Transparent to Solid

Transparency of default cell background. Lower creates subtle, barely-visible grid. Higher produces prominent, opaque cells.

Default: Semi-transparent (40%)

Hover Effect

Hover Color Color picker

Color cells change to when cursor hovers over them. Provides immediate visual feedback.

Default: Cyan blue

Hover Opacity Transparent to Solid

Transparency of hover color. Lower keeps hover effect subtle. Higher creates bold, clear hover state.

Default: Visible (60%)

Ripple Effect

Ripple Color Color picker

Color of ripple wave that expands from click point. Creates the main visual effect of the animation.

Default: Cyan blue

Ripple Opacity Transparent to Solid

Transparency of ripple color. Lower creates subtle waves. Higher produces vibrant, eye-catching ripples.

Default: Solid (100%)

Wave Speed Slow to Fast

How quickly ripple wave expands across grid. Lower creates slow, graceful propagation. Higher produces quick, snappy waves.

Default: Moderate (55)

Position

Vertical Alignment Position choice

Where the grid sits vertically in the container. Top aligns to container top. Center places in middle. Bottom aligns to container bottom.

Default: Center

Fade Effects

Fade Direction Edge choice

Which edges fade to transparency. None keeps grid solid. Top/Bottom/Left/Right fades from that edge. Radial fades from center outward in circle.

Default: None

Fade Intensity Subtle to Strong

How much the grid fades at edges. Lower keeps more grid visible. Higher creates dramatic fade to transparency.

Default: Moderate (50%)

Performance

This element uses CSS Grid for layout with CSS animations for ripple effects. Features distance-based delay calculation for organic wave propagation. Includes responsive behavior that adjusts grid density on mobile devices. Implements CSS mask for fade effects. Very lightweight - suitable for all devices with 1-2 instances per page recommended. Automatically repositions on window resize.