CODEWITHSUNDEEP
htmlcssstylesshadow
FriendlyMushroom
FriendlyMushroom

Reputation: 188

Apply box shadow to border in css

I made this button design in Figma and would like to apply it in CSS.

enter image description here

If you look closely you can see that I applied a highlight with a white shadow on the border

But when I do it with the following CSS lines it just has a shadow inside and not on the border like this image shows.

enter image description here

div {
  border-style: solid;
  border-width: 0.7em;
  border-color: var(--highlight);
  box-shadow: inset 0.2em 0.2em 0.4em rgba(255, 255, 255, 0.25), inset -2px -2px 4px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}
<div> Sign Up </div>

how can I apply the highlight/shadow on the border?

Upvotes: 1

Views: 2151

Answers (3)

Jeevan Sadalge
Jeevan Sadalge

Reputation: 21

Image showing box shadow effect> box-shadow: 0 0 25px color-of-choice;

This will create a faint shadow all around the image or block. Make sure the color matches with your background color.

Upvotes: 0

Brijesh Gujarati
Brijesh Gujarati

Reputation: 156

<style> 
#example3 {
  border: 10px solid red;
  border-radius: 5px
}
#bg{
background-color: #000;
color: #fff;
padding: 20px;
text-align: center
}
</style>

<div id="bg">
<div id="example3">
  <p>A pink shadow.</p>
</div>
</div>

Upvotes: 1

Steffan Xavier
Steffan Xavier

Reputation: 21

I have trying to create the div looks like your Figma design, I use the combination of normal (outset) box-shadow and inset box-shadow. The outset was used to give bright shadow and make the div looks stronger, and I saw the figma show the darker inner shadow to make the border looks a little bit 3D.

NOTE: I use border-style: ridge to make the border looks 3D as shown in Your Figma, you can make it flat by using border-style: solid [Capture attached below

body{
  background-color: rgb(50, 53, 90);
}
div {
  width: 100px;
  margin: auto;
  color: white;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: .6rem;
  text-align: center;
  border-style: ridge;
  border-width: 0.2em;
  border-color: rgb(251, 55, 102);
  box-shadow:  0em 0em 1.5px rgba(255, 255, 255, 0.25), inset 0px 0px 5px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}

Using border-style: ridge

body{
  background-color: rgb(50, 53, 90);
}
div {
  width: 100px;
  margin: auto;
  color: white;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: .6rem;
  text-align: center;
  border-style: solid;
  border-width: 0.2em;
  border-color: rgb(251, 55, 102);
  box-shadow:  0em 0em 1.5px rgba(255, 255, 255, 0.25), inset 0px 0px 5px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}

Using border-style: solid

Sorry if this is not what you want, I hope you like my answer

Upvotes: 2

Related Questions