Webflow app · Design

Customize Shadows & Gradients with Smart Shadows Webflow App

In Webflow, Smart Shadows builds box and text shadows, glow effects, and gradients for site elements.

Smart Shadows preview

Webflow pages can use custom shadows, glow effects, and gradients, configured in the app rather than through code. Site owners can begin with presets or adjust the settings themselves.

Fluttertop Studio made Smart Shadows, which is listed as free.

What Smart Shadows does

The app creates visual effects for Webflow projects. Box shadow controls include inset or outset styling, X and Y offsets, blur, spread, opacity, and color; text shadows have controls for offsets, blur, opacity, and color.

For gradients, users can set the angle, add multiple colors, and position color stops. Finished styles can be used on Webflow elements or copied as CSS.

Features worth knowing

  • Configure box shadows with inset or outset styles, offsets, blur, spread, opacity, and color.
  • Set text shadow offsets, blur, opacity, and color.
  • Adjust gradient angles, add colors, and position each color stop.
  • Use presets for shadows, text effects, and gradients, or reset settings to start again.

Who it suits

Smart Shadows suits Webflow users who want to shape shadows and gradients without writing code. It fits projects that call for tailored effects on page elements, whether people start from a preset or set the controls themselves.

Smart Shadows FAQ

Can I start with a preset?

Yes. Presets are available for box shadows, text effects, and gradients.

Can I copy CSS for a style I create?

Yes. Smart Shadows lets users copy the CSS for a created style.

How can I use a finished style in my project?

Users can apply a created style to an element in Webflow or copy its CSS.

What does reset do?

Reset clears the current settings so users can begin a new design.

Which effects can I create?

Smart Shadows creates box shadows, text shadows, glow effects, and gradients within Webflow.

Categories

Inputflow
Inputflow Build multi-step Webflow forms that guide visitors through questions, choices and calculated outcomes.
Install app
Hugeicons
Hugeicons Find and add SVG icons in Webflow, then recolor, resize, or animate them as editable layers.
Install app
Closeby
Closeby A searchable map gives visitors a way to find a business’s physical locations on its Webflow site.
Install app
IconSearch
IconSearch Add searchable SVG icons to your Webflow canvas, ready to place within or around selected elements.
Install app
Icon Drop
Icon Drop In Webflow, search for icons and add them as editable elements you can recolor or animate.
Install app