Html Question posted in
Some basic documentation can be found here.

Html – how to create a background shadow with css

I want to create a background shadow that appear like the green one bellow on attached screen shot.. how can i achieve it with CSS?

the screen shot here originate from https://nodejs.org/en `

Tags:

3

Answers


  1. 0

    so you have to apply box-shadow property to the element like

    div
{
  color:aqua;
  box-shadow: 1px 1px 1px black

}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>App</title>
  </head>
  <body>
    <div></div>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    I think you’re referring to radial-gradients, and adding these in CSS is pretty easy, but for the specific style, you’d need some additional styles as well…

    These are what I’ve used to recreate your design:

    • Radial gradients
    • Z-Index
    • Pseudo-elements (::before and ::after)
    • Different positioning (absolute and relative)
    • Additional, a hexagon pattern background on the container

    This is the recreation:

    body {
  background: white;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-content: center;
}

.container {
  position: relative;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.1' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 40px;
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding-left: 40px;
  overflow: hidden;
}

h1 {
  position: relative;
  z-index: 2;
  width: 66%;
  font-size: 2.25rem;
  line-height: 1.1em;
  color: #323a3c;
}

.container::before {
  position: absolute;
  z-index: 1;
  content: '';
  right: -22rem;
  width: 40rem;
  height: 40rem;
  background: radial-gradient(#a2d189, transparent 70%);
}

.container::after {
  position: absolute;
  z-index: 0;
  content: '';
  left: -20rem;
  width: 40rem;
  height: 40rem;
  background: radial-gradient(#fff, transparent 70%);
}
    <div class="container">
  <div class="parent">
    <h1>
      Run JavaScript Everywhere
    </h1>
  </div>
</div>

    Additionally, there appears to be some gradient on the text itself from light gray to a darker shade, this can be achieved in the following way:

    h1 {
  background: linear-gradient(to bottom, #323a3c, #555c5e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
    Login or Signup to reply.
  3. 0

    Based on the image that you attached, you can get the result by creating a layout on the container using a pseudo-element ::before

    .container {
  position: relative;
  width: 100%;
  height: 300px;
  border: 1px solid black;
}

.container::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 52%, rgba(162, 209, 137, 1) 100%);
  z-index: 100;
}
    <div class="container">
  //your content here
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search