The widget library for WordPress is here Download plugin

Gradient Statistics Grid - Impact Numbers

Free

Turn dry data into a dazzling visual statement with the Gradient Statistics Grid. This widget is designed to highlight your company's most impressive metrics—such as ROI increases, client retention rates, or project completions—using modern, eye-catching typography.

The standout feature of this layout is the CSS Gradient Text effect applied to the numbers. Unlike standard solid-color text, these numbers feature a smooth color transition (fully editable via separate "Start" and "End" color variables), adding depth and vibrancy to your page. The layout is built on a robust responsive grid that automatically adjusts from a single column on mobile to a four-column spread on desktop, ensuring your key performance indicators (KPIs) look perfect on any device.

Key Features:

  • Gradient Typography: Utilizes advanced CSS background-clip: text to apply smooth, two-tone color gradients directly to the numbers.
  • Fully Customizable Gradients: Includes specific variables for --gradient-start and --gradient-end, allowing you to perfectly match the gradient to your brand palette.
  • Responsive Grid Layout: Automatically reflows content from 4 columns (desktop) to 2 columns (tablet) and 1 column (mobile).
  • Scalable Architecture: Includes a template structure, making it easy to add or remove statistic blocks without breaking the layout.
  • Clean & Minimalist: Focuses entirely on the data, removing borders and shadows to let the typography shine.

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

đź‘‹ P.S. Have questions? Leave a comment.