CSS shadow generator

A fantastic CSS shadow generator free for use and with tons of features, including more than 8 shadow styles, opacity, blur and position handlers, real-time preview of both design and source code.


The generator features a very intuitive control section where you can switch between the different shadow styles and adjust their position, opacity and blur values.


As you play with the handlers, you will be able to see a real-time preview of how your shadow is going to look like, and to make things even better, the actual CSS code will be permanently updated according to the parameters you set from the handlers.

The options are almost limitless as you can combine different position values, play with the opacity and blur and choose between the different shadow styles (default, bottom, sides, top & bottom, bottom left, bottom right, etc) to create some pretty cool things.

Open CSS Shadow Generator

Comments and suggetiions in here

Commenting is the best way to say thanks :)

126 people showed their love and said thanks, will you?

  1. It’s been really helpful. Now i can generate box shadows.

    • ThemeShock - June 24th

      We are happy to read that! always looking to bring the best to our users!

  2. Janja - June 30th

    I must be missing something, I’d love to use this but it doesn’t seem to work. It does not generate code. How to I get the code for the css? The generated code preview box just stays empty….

    What am I doing wrong?

    • admin - July 6th

      Please try again, make sure that you’re using an up to date version of your browser. Best!

  3. Roy - May 24th

    You people save lives.

    • admin - May 31st

      Hi Roy, we try to do that, we are glad to have helped you. Best wishes!

  4. RobertaJS - May 6th

    As usual you are offering so much for free it’s almost overwhelming! I have so many projects coming up but as soon as those are out of the way, I will dig in to what I’ve downloaded today and get creating!! Thank you so much!.

    • admin - May 7th

      Great RobertaJS you’ll certainly learn a lot working on that material. Take care!

  5. Vinieux - March 22nd

    How about a subtle shadow on both sides of a container? The 2 sided shadow here looks more like horns on top and bottom… What if I want a straight shadow all the way down the left and the right of a container? Do i still have to rely on a background image?

    • admin - March 26th

      Ok, thanks for the tip, we’re gonna give it a try and see what happens.

      thanks for your comment Vinieux, regards!.

  6. Jennifer - March 21st

    So glad I found you!! Can’t wait to incorporate it!

  7. I think you folks are the bomb and I’m telling everyone I know and posting it on all my sites, all my sites. And I’m going to twitter you ever day for a month free.

    • admin - March 26th

      Hello Elaine!

      We’re glad to see you are enjoying our work, we like to see you find our shadow generator useful, keep checking the blog often in order to be updated with new content.


  8. Ali - January 10th

    I tried creating something like this, but I struggled to get the effect, your work has saved me hours. Theres no point reinventing the wheel when work like yours exists out there, thanks buddy.

  9. Your cranium must be protecting some very vaulalbe brains.

  10. That’s really tnhiikng out of the box. Thanks!

  11. Absolutely first rate and cpoepr-bottomed, gentlemen!

    • admin - November 24th

      Thank you for the recognition to our work. Be on the lookout for upcoming posts on the matter. Best regards…

  12. Wheveor edits and publishes these articles really knows what they’re doing.

  13. How can you guys be so generous?

    Not complaining one bit – keep it up!

  14. Hahahaha. I’m not too birhgt today. Great post!

  15. Yeah, that’s the tcekit, sir or ma’am

  16. admin - November 24th


  17. With all these silly websites, such a great page keeps my intnreet hope alive.

  18. This has made my day. I wish all postgins were this good.

  19. admin - November 24th

    Thank you for the recognition to our work. Be on the lookout for upcoming posts on the matter. Best regards

  20. admin - November 21st

    Thanks for the recognition to our work, Best Regards.

  21. Always refreshing to hear a rational anwesr.

  22. Bubba - January 29th

    wow! Why can’t I think of tihngs like that?

  23. admin - January 30th

    Thank you for the recognition to our work. Best regards. ././.

  24. Homepage says:

    … [Trackback]…

    […] Informations on that Topic: themeshock.com/css-shadow-generator/ […]…

Check The Full DesignShock Bundle