Make a smooth css shadow

https://tobiasahlin.com/blog/layered-smooth-box-shadows/

But with a simple CSS technique, we can expand our range of options. If we use layered box-shadows we can get more fine-grained control over how shadows are rendered:

So you think you know box shadows huh? I bet you didn't know they could do this.

CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.

Let’s talk shadows in web design. Shadows add texture, perspective, and emphasize the dimensions of objects.

There are two kinds of shadows that occur when a light shines on an object, a drop shadow and a form shadow.

Figuring out how to add shading your hand lettering can be a little difficult to figure out. In this video, I'm going to show you some secret hacks to start figuring out how exactly to shade your hand lettering & calligraphy with no overwhelm!

The links below may be affiliate links where appropriate. This means that your purchase through these links may result in a few cents in payment to me, to support creating further resources like this one! That being said, I will never suggest supplies that I do not personally use and fully recommend.

Tools used in this video:
✔️ Fine Point Sharpie: https://amzn.to/2kbkGJp
✔️ Tombow Dual Brush Pen: https://amzn.to/2lHN4n2
✔️ Tracing Paper: https://amzn.to/2Lr5zGw

Create a set of lush, realistic CSS shadows.

https://www.joshwcomeau.com/css/introducing-shadow-palette-generator/

When I look around the web, most of the shadows I see are fuzzy grey boxes. It doesn't have to be this way, though! CSS gives us the tools to create rich, lush, lifelike shadows. In this tutorial, I'll show you how.

X 0
Y 5
Blur 12
Alpha 8%
Colro #004365

General visual consistency

How to make our design look sleek and consistent? Start with preparing this:

1. Choose colors you want to use
2. Choose a font(s) you want to use
3. Decide on how deep/blurred you want your shadows to be.
4. If you are using icons, decide whether you want to use solid or outlines. Try not to mix them.
   By now, you created your little design-system. How cool! 😎
   Now you should stick to it.

If you want your shadows to look even more fanciful, make the shadow have the same color as the element that casts it, then lower the opacity. Ideally, the background would have a similar tone, too.

Making gradients look more smooth and delicate

Choose the right color for the font, so it matches the background.

box-shadow: 0px 8px 24px rgb( 0, 0, 0, .15 );

x: 0px
y: 8px
Blur: 24px
Alpha: 15%
Color: #000000

1. Make your elements appear more defined
   Use Multiple Drop Shadows, or a very subtle border (just a shade darker than your actual shadow) around certain elements to make those elements appear a little sharper, more defined, and help avoid those muddy shadows.

2. Creating long-form content? Give 20pt, and up a try
   #18pt is sooo last decade.#

3. Your shadows are coming from one light source right?

4. Improve Contrast between Text and Images with a subtle, but simple Overlay
   Depending on where the text may be positioned over your image, you can either opt for a tried, and tested full image overlay, or a more subtle (bottom to top, or top to bottom) gradient overlay to achieve a simple contrast between the two elements.

Shadows And User Interface Discoverability Link
There’s a reason GUI designers incorporate shadows into their designs — they help create visual cues in the interface which tell human brains what user interface elements they’re looking at.