Optimize for non-Webflow sites

Apply a drop shadow

Updated

Create depth and emphasis with border shadows and text shadows in the visual editor.

You can use shadows to make elements look more 3D — like they're being lit from above and casting a shadow behind them. There are two types of shadows you can add in the visual editor: border shadows and text shadows.

Border shadows

Border shadows apply a shadow to an element's content box — these types of shadows are also called box shadows. 

From the visual editor's Changes panel, go to Borders > Shadow. You'll need to enter these values:

  • X position — moves the shadow left or right. Negative values move it left.
  • Y position — moves the shadow up or down. Negative values move it up.
  • Blur — controls how blurry the shadow is. A value of 0 makes it solid.
  • Spread — makes the shadow bigger or smaller. Use negative values to shrink it.
  • Color — use a hex value (like #000000) or other formats like rgb(0,0,0). If none is set, the default is black.

Example:

-10px 10px 20px 0px #A8A8A8

Box shadow generator: 

You can use Mozilla's box-shadow generator to test and explore box shadow values. Click the plus icon to add a shadow, adjust the sliders to change position and blur, and pick a color. Copy the values for Optimize — but leave out the box-shadow: part.

Text shadows

Text shadows apply a shadow to the text in a text element. 

From the visual editor's Changes panel, go to Fonts > Text shadow. You'll need to enter these values:

  • X position — moves the shadow left or right. Negative values move it left.
  • Y position — moves the shadow up or down. Negative values move it up.
  • Blur — controls how blurry the shadow is. A value of 0 makes it solid.
  • Color — use a hex value (like #000000) or other formats like rgb(0,0,0). If none is set, the default is black.
  • Opacity — 0 is fully transparent, 0.5 is semi-transparent, 1 is fully solid

Note

You can use RGBA to define both color and opacity — where A is the opacity.

Example:

-7px 1px 0px rgba(22,0,255,0.26);

Text shadow generator:

You can use cssgenerator.org's text shadow tool to test and explore text shadow values. Use the sliders to change the position, blur, and opacity. Click the color square to pick a color. Copy the values for Optimize — but leave out the text-shadow: part.

Related articles