6 Cool Ways to Use Shadows in CSS

CSS’s box-shadow and text-shadow properties are incredibly versatile, allowing you not just to add shadows to various elements and text, but also making it possible to create cool, multi-dimensional effects for your projects. If you’re looking for inspiration on new ways to use shadows in your sites, check out this list of some of the most professional, smooth, and innovative ways that box and text shadows can be easily implemented in any projects.

1. Diffused Shadow

Screen Shot 2017-02-21 at 10.43.32 AM

 

This tutorial demonstrates how to apply a subtle, soft box shadow to your block level elements. The shadow in this tutorial is “diffused,” so the effect is a lot more realistic than your standard box-shadow code.

2. Text-Shadow Hover Effects

Screen Shot 2017-02-21 at 10.46.06 AM

 

One of the coolest things about the text-shadow property is that it can be used to create unique 3D text effects. This snippet shows you how to use text-shadow to create a smooth shadow effect with an animated transition upon hover.

3. Dashed Shadow

Screen Shot 2017-02-21 at 10.56.31 AM

 

Not your average text-shadow effect — this snippet shows you how to create a text shadow that is dashed, rather than solid. Definitely a cool way to shake up the basic and expected solid text-shadow and add a little fun to your projects.

4. Long Shadow Designs

Screen Shot 2017-02-21 at 11.01.02 AM

 

According to the author of this tutorial, flat design is a thing of the past. If you’re on board with the new 3D design trend, then you’ll probably love this take on shadows. This snippet shows you how to create icons, buttons, and text with long, exaggerated shadows to add a cool 3D effect to your projects.

5. Long Shadow Text

Screen Shot 2017-02-21 at 11.03.27 AM

Another take on long text-shadows, the shadows in this snippet are more diffused with a longer fade than the shadows in the tutorial above.

6.  Parallax Shadow

Screen Shot 2017-02-21 at 11.08.40 AM

 

One of the more innovative tutorials on this list, the shadow in this snippet moves in conjunction with the scroll. So if the user scrolls down, the shadow effect on the text appears below the text. If the user scrolls back up, the shadow effect appears to move above the text. A pretty neat effect to add to any of your projects!

CSS Snippets: Retro Text Effect

Screen Shot 2017-02-14 at 12.02.06 PM

One of our favorite ways to play around with CSS is to apply cool effects to text. Text-shadows are a great, versatile tool to employ if you’re looking to apply cool effects to text, as you’ll see in the following snippet. Using CSS text-shadows, it’s easy to create a retro text effect that’s reminiscent of […]

Read on...

CSS Shapes: How to Make a Heart

Screen Shot 2017-02-14 at 11.22.31 AM

With Valentine’s Day season upon us, you might find yourself wanting to add some seasonal flair to your websites or projects. An easy way to do this is by adding heart shapes to your pages. You can do this by using a heart graphic or by using CSS to style a div element to look […]

Read on...

6 Coolest CSS Snippets for Valentine’s Day

Screen Shot 2017-02-08 at 11.07.09 AM

Whether you love it or you hate it, it can’t be denied that Valentine’s Day is fast approaching. If you’re feeling festive, you might be thinking about adding some Valentine’s-inspired flair to your websites or projects. Take a look at the following list of our favorite Valentine’s Day code snippets to gather inspiration for your own creations […]

Read on...

How to Style Links According to Link Type

Using CSS, it’s pretty easy to style a whole bunch of different elements of the same element type in different ways by assigning them different classes. However, if you want to get technical, this can also be achieved by using attribute selectors. Attribute selectors are used in CSS to select different HTML elements to style based […]

Read on...

The 4 Best Responsive HTML5 Frameworks

Screen Shot 2017-01-29 at 9.41.11 AM

Don’t feel like creating a website from scratch for your next project? Check out any of these responsive HTML5 frameworks that’ll help you get going quickly and easily. 1. Bootstrap Bootstrap is a really popular framework brought to us by the people over at Twitter. It’s fully responsive and mobile friendly, uses two CSS preprocessors […]

Read on...

CSS Burning Text Effect

Here’s a fun little CSS snippet that allows you to create text that looks like it’s on FIRE. It’s achieved using text-shadow and is a super easy effect to add to any of your projects. First you’ll need some HTML: <div id=“fire”>FIRE</div> That’s the easy part. Now for the CSS. Here’s what your styling should […]

Read on...

6 Cool CSS Button Snippets

Screen Shot 2017-01-23 at 11.27.20 AM

When it comes to styling buttons, the possibilities are endless. Check out some of these snippets and tutorials to get some ideas for your next button creations! 1. Flat UI Buttons  These colorful buttons have a flat design, hover effects, and push transitions. 2. Minimalist Hover Effect Buttons The button designs from this tutorial are […]

Read on...

CSS’s Word-Wrap Property

Screen Shot 2017-01-23 at 11.23.49 AM

CSS’s word-wrap property can be used to break a really long word so that it continues on the next line rather than having the word extend beyond its potential boundaries so that it all stays on one line. Let’s say you had a really long word that was taking up way too much space, like […]

Read on...

CSS3’s Tilted Text Effect

Screen Shot 2017-01-11 at 1.33.14 PM

Here’s a cool text effect that can be achieved easily using CSS3: tilted text. To create this effect, you’ll need to create to divs — one for the text that is to be tilted to the left, and another for the text that is to be tilted to the right. Your HTML should look something […]

Read on...