htmlcssglow

How to add glow effect for div just in upper right corner?

I have a div block like this: https://i.sstatic.net/hHviX.png. I need to redo it, but I don't know how to add the glow in the top right corner with the hover effect. If anyone knows, please let me know.

I am trying to add box-shadow but it is not working. Box-shadow has been superimposed on all right and top side.

Solution

  • perhaps something like this using either a linear-gradient or radial-gradient CSS function?

    .myDiv {
  height: 200px;
  width: 250px;
  background: rgb(36, 44, 49);
  background: linear-gradient(45deg, rgba(36, 44, 49, 1) 0%, rgba(36, 44, 49, 1) 75%, rgba(198, 135, 25, 1) 100%);
  border-radius: 20px;
}

.myDiv2 {
  height: 200px;
  width: 250px;
  background: rgb(198, 135, 25);
  background: radial-gradient(circle at top right, rgba(198, 135, 25, 1) 0%, rgba(36, 44, 49, 1) 25%);
  border-radius: 20px;
}
    <div class='myDiv'></div>
<br/>
<div class='myDiv2'></div>