Glowing cut on tiles edges

Hi Sharptools people, I have noticed that glowing effect for lights devices tiles is limited by tile edge display while glowing effect in Virtual or Simulated Switches are not cut by tile edges. Is there any CSS way or something to adjust glowing effect for lights devices tiles to keep it inside tile borders?

Thanks !!


Are the top two Color Control tiles? If I remember correctly, they cast a slightly wider glow than normal ‘Switch’ tiles.

(The shape of the icon that’s used also has some role in the appearance.)

1 Like

Hi my friend @josh, 4 of them are control tiles, 2 of in the top “Color control light” (1 per 1 bedroom light) and 2 in the bottom are virtual control switches “Control Switch” tiles that on/off a group of lights each one (Garage and Backyard). Thanks again !

Pd: I have noticed also that in the browser display this difference does not happen, but in mobiles displays do.

Just to clarify, I’m talking about the Tile Layout. The Color Control and Color Temperature tile layouts cast the glow a bit further.

So in the following screenshot, all three tiles are using the same color capable device, but the first one is using the Color Control layout, the second is using the Color Temperature layout, and the third is using the Switch layout.

The tile size is set to 80px to exaggerate the issue:


If I return the tiles back to their 160px default, the issue isn’t noticeable as there’s enough room for the glow to cast:

The point being that depending on how you have your dashboards sizing, the effective tile size might be different between a desktop and mobile device. (Additionally, different browsers might render things slightly differently)

The glow is a layered effect with each ‘glow layer’ casting the glow out a certain number of pixels out from each icon. In the case of the Color Control layout, there’s an extra 20px glow layer to make the effect more pronounced across the various colors that can be displayed:

  • Switch: 3px, 10px
  • Color: 3px, 10px, 20px

If you want to allow the glow on the Color Control layout to extend beyond the tile (and not get cutoff), you could use a CSS snippet like the following:

.tile.color-control {
   overflow: visible;

Here’s the same 80px tiles with that snippet showing the difference:


As usual, any CSS snippets provided are not officially supported and may need to be updated with future SharpTools releases.

1 Like

Coool, thanks very much…Im being a little more expert each time !..

1 Like

If you wanted the reverse effect where the glow on the regular switch tiles was a bit longer so it’s more likely to get cutoff by the tile, you could also use a CSS snippet like:

.icon.glow-yellow, svg.glow-yellow {
    -webkit-filter: drop-shadow(0 0 3px #ff0)drop-shadow(0 0 10px #ff0)drop-shadow(0 0 20px #ff0);;
    filter: drop-shadow(0 0 3px yellow)drop-shadow(0 0 10px yellow)drop-shadow(0 0 20px yellow);
1 Like

Hi @josh, hoping everything is going great! Its a cool stuff playing around with overflow and glowing effects with sample of CSS snippet you shared for .tile.color-control and .icon.glow-yellow. Hope you can guide me with 2 issues:

a) How can replicate “overflow: visible” set to Simulated Switch devices with Switch Tile layout
Note: I had a longshot testing with “.tile.switch-level { overflow: visible; }” and works for a Light device in a Switch Tile layout, but is not working for Simulated Switches.

b) How can I play around with glowing for Lights devices with Color Control Tile Layout, I had make some improvement for “.icon.glow-yellow” and love learning more …

Thanks for your kindly help !

Can you take a screenshot of this Switch Tile? The Switch Tile’s glowing effect is shorter than Color Control and Color Temperature Tile, so I think you shouldn’t need to use overflow:visible; in this case. See screenshot below where tile size is 80px, and the glow is short enough without being cut.

For selecting the icon class in Color Control Tile, you can use .tile.color-control .icon, because it doesn’t have the glow-yellow class in the <div> element where the icon class is located.

This is how the Switch Tile’s HTML elements look like.

1 Like

Tanks for your assistant my friend, you are right, glowing is not cut by the tile, just to play around I have found that when tapping in a glowing tile a cool “flash effect” is displayed when active and inactive and glow is set, for color-control tiles this flash effect goes really cool outside of the tile, but for the switch tiles the “flash effect” is cut and limited by the tile, not a big issue, just to go deeper and play with Sharptools …

For .tile.color-control .icon Im totally lost, trying to longshot how to do the CSS snippet, but nothing has worked and I am really ignorant to get about HTML you posted, Im just keeping playing around …

Thanks again …