Grid Blur CSS Controller

Controls

Live

Temporary background image Default image

Choose an image from your computer. It stays local in this browser tab and is not uploaded to any server.

CSS class name .gridhro

Write the Elementor class without a dot. Invalid characters are cleaned automatically.

Blur amount 8px

0px · sharp120px · deep

The higher the value, the stronger the background blur.

Pattern template Classic grid

Choose a CSS pattern or one of the supplied reference images.

Pattern color #FFFFFF

Changes CSS-generated line, dot and glow patterns.

Pattern opacity 65%

0% · invisible100% · strong

Controls the visibility of the selected grid or reference pattern.

Grid size 60px

8px · small120px · large

Smaller values create a denser grid; larger values create more spacing.

Overlay opacity 45%

0% · clear100% · dark

Controls the dark overlay behind the grid lines.

Enable blur layer

Toggle the ::before blur overlay.

Live preview

8px blur · 60px grid · 45% overlay · 65% pattern · Classic grid

.gridhro

Glass grid effect

Change the sliders to see how blur depth and grid spacing affect this component.

Generated CSS

Copy ready

Important: add the generated class to the same Elementor Section/Container that owns the background image or video. Do not add it to an inner child. The generated code includes the Elementor background-video selectors and keeps all content sharp.