DEV Community

Cover image for Some useful CSS Properties you Never used 😀
acode123
acode123

Posted on

3 2

Some useful CSS Properties you Never used 😀

CSS is not a complicated language, as long as you understand the basics, everything is alright 👍.

Property Number 1: Box Shadow 👈

Who doesn't want a 3D website! Or a 3D button when hovered over? Well let me tell you this, you are one line of code away! 😁
Box-Shadow

Well, here is the secret!

box-shadow: 1px 1px 1px 1px;
Enter fullscreen mode Exit fullscreen mode

Now you get a box shadow with a 👇

  • Height of 1px
  • Width of 1px
  • Blur of 1px
  • Spread of 1px

Here is a syntax cheat sheet for you! 👇

box-shadow: h-offset v-offset blur spread color
Enter fullscreen mode Exit fullscreen mode

H-offset is basically the height, and the v-offset is the width. For the blur, the higher the number, the more blur, and the spread is the distance the shadow goes before starting the blur.

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more