How to Add CSS Box Shadow in WordPress.
Want to add drop shadow effect to images or other content on your site? This can be done with CSS, no complicated software needed. The advantage of using CSS to add a drop shadow effect is that you can target elements precisely and change them as needed. In the case of images, adding a drop shadow effect using CSS removes the need to constantly change them.
You can add a drop shadow effect with a simple CSS property called Box Shadow to almost any HTML element or image. Box Shadow is a simple CSS property that attaches one or more shadows to an element using offsets, blur, radius, and color. Box Shadow was introduced to CSS back when it is supported by all modern browsers.
The best thing about Box Shadow is that you can add a shadow effect outside of the content box or inside. Now you might be wondering what the content field actually means. In simple terms, a content field is nothing more than an HTML element like P, DIV, etc.
CSS Box Shadow Syntax
The syntax for the Box-Shadow property would be something like this. box-shadow: ;
Horizontal offset (required): This is a required value, and when you set positive values ​​(for example, 10px), the shadow will move horizontally to the left. A negative value (eg -10px) will move the shadow to the right. You can set it to 0 if you don’t want to offset the shadow.
Vertical offset (required): This is a required value, and when you set positive values ​​(for example, 10px), the shadow will move vertically downward. Negative values ​​(like -10px) will push the shadow up vertically. You can set it to 0 if you don’t want to offset the shadow.
Blur Radius (required): This value blurs the shadow so it doesn’t have hard edges. The higher you set the value, the higher the blur effect will be. If you don’t want the blur effect, you can set it to “0”.
Spread Radius (parameter value): This is an optional value that expands the shadow based on the value you set. The higher the value, the higher the spread will be. If you don’t want a spreading effect, you can either omit the value or set it to “0”.
Color (required): You can set any color using hexadecimal, RGB (red, blue, green, alpha), HLSA (hue, saturation, lightness, alpha), and HTML named colors. If you have not set any color, the browser will set the default color. The default color depends entirely on the browser you are using. Thus, it is always recommended to set the color.
Add a CSS Box Shadow to an Image or Content Box
Using the above syntax, you can easily add drop shadow effect to any element. For example, if you want to add a blur and spread shadow effect to a div element, then all you have to do is target that element with the element’s tag or its CSS class or id, and fill in the box-shadow property values. It will look something like this. .shadow effect {box-shadow: 3px 3px 10px 2px # a9a1a1; }
Result:
If you don’t want to blur the shadow, but want to stretch it, the code will look something like this. .shadow effect {box-shadow: 5px 5px 0px 2px # a9a1a1; }
As you can see, I have set the blur radius to 0 pixels. The resulting shadow effect has sharp edges and looks something like this.
One of the craziest things about the Box-Shadow property is that it allows you to add multiple shadows. To do this, all you have to do is supply the values, separated by commas. The syntax will look something like this. .shadow-effect {box-shadow: 10px 10px 0 blue, 15px 15px 0 red, 20px 20px 0 green; }
By adding “inset” to the box-shadow property, you can show the shadow effect inside the content box. .shadow-effect {box-shadow: inset 3px 3px 10px 2px # a9a1a1; }
Result:
These are just a few examples of how you can add a drop shadow effect to any content block or image. By simply changing different values, you can get the desired shadow effect. Just play around and see what works for you.
CSS Text Shadow Generator
If you want to add shadow to text, you must use the Text-Shadow property. The syntax is very similar to the Box-Shadow property, but there is no spread radius in the Text-Shadow property. Here’s the syntax. text shadow: ;
When you replace the above syntax with actual values, it looks something like this. p {text-shadow: 1px 1px 2px # 333333; }
As a result, the effect will be something like this.
Unlike the box-shadow property, the blur value in Text-Shadow is optional. that is, if you don’t want the text shadow to be blurry, you can either omit the value or set it to “0”.
Add CSS Box Shadow to specific images on WordPress
Now that we’ve figured out how to add a drop shadow effect to images using CSS, we now need a way to add it to specific images without affecting other images on the website.
To do this, you can simply create a new CSS class and add it to the image as needed. This way, only images with that particular CSS class will have a drop shadow effect.
To create a new CSS class, you can use the Simple Custom CSS WordPress plugin or m Other WP themes also come with a custom.css file. You can also add CSS code to this file.
Then double-click the Edit icon for that image (the one that looks like a pencil). In the Advanced section, find Image CSS Class and enter the class name you defined in our stylesheet. In this case, the name of our class is shadow-effect after saving the changes.
Then click “Save Draft” or “Refresh” to refresh your WordPress page. When the page is refreshed, the result looks like this:
Only images with a CSS class shadow effect will have a Box Shadow around them. If your blog post has 20 images, you’ll have to do it manually for 20 images, which is a bit tedious. However, it will save you a lot of editing time in Photoshop.
As you can see, adding a drop shadow effect using CSS is no big deal. The examples I’ve shown here are just the basics. Just play around with different values ​​and you will see how effective the Box-Shadow and Text-Shadow properties are. For ease of use, you can also use a shadow generator.
Hope this helps. Comment below, share your thoughts and experiences on using the above method to add drop shadow effect to images or content fields using CSS.