CMS Collection Color used for shadow styling

Design help General
1

Hi,

does anyone know if I could use the Collection colour field to style the shadow?

Thanks

Bojan

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

View the tutorial here:

3

Thanks for the link. However, it doesn’t bring any solution to the particular issue I have

4

Okay, what exactly do you need done? Please add your read-only link as well.

5

You can’t use CMS colors for CSS Shadows with Webflow.

But you can get creative and make a fake shadow.

Box Shadow
You must already know how to color a box using a CMS color, now think about placing this box under another box of the same size, offset the placement using positioning values, and using CSS filter Blur, with Opacity, to achieve your shadow.

Text Shadow
As for text, if you want a CMS colored shadow for a title, for example, place two copies of your CMS title one above each other in a div, suing position absolute and z-index, then add a class to the one below, give it cms color, offset its position, and use, again, blur and opacity to achieve your CMS colored shadow. You can even use 3, 4 cpies of the text for a more complex shadow with highlights and stuff.

I’ve talked about using layered text elements for rich effects in an article about layered fonts. It’s the same logic. It’s here : http://inb4.webflow.io/posts/designing-with-multilayered-fonts-in-webflow

The magic of it is that it’s dynamic: it’s delicate to build, take some time, but once it’s set, it works everywhere!

The CSS filters are in the bottom of the Style panel.

2 Likes
6

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.