Download Set

Newsletter

Download this set by subscribing to our freebies newsletter. No crap, no ads, no spam! only quality freebies.





Freebies by: Iconshock, Designshock and Themeshock

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

ThemeShock Premium Wordpress Themes, Freebies and Plugins

CSS shadow generator


csshadowgenerator00

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.

csshadowgenerator01

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.

csshadowgenerator02

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.

      Regards!

  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. Awesome Stuff, thanks for this, will save me a lot of time..

  15. christina - June 23rd

    thanx alot, great stuff!

  16. Oh god no. If you’re going to use shadows, make them realistic.

    • admin - June 13th

      Federico, well, actually the bext we can get with pure css, do u have an example to a btter ones ? we’d love to see it to future tools

    • Wow! That’s a really neat asnewr!

  17. The Page is gone, the link to the generator is not working. Get it up and going again!

    This is such a helpfull tool

    • admin - June 7th

      Rob, thanks, it’s now working.

      • Smack-dab what I was loonkig for-ty!

      • That’s a mold-breaker. Great tihkning!

        • admin - November 21st

          Thanks for the recognition to our work. Best regards

        • Steffie, non-websafe fonts would look good on your machine bseauce you have those fonts installed on your machine. But if you use non-websafe fonts on your site and a visitor visits your site that doesn’t have those font your design and layout may look very very different than the way you designed it. So I’d stick to websafe fonts for all content text, then if your going to use a non-websafe font use this tip to convert them to images, then you know it will look the same across every browser. But keep in mind that your new text image is not searchable.

  18. KnievesChoo - May 18th

    All of them look so pretty!! =P thank you so much, now all I have to do is choose my fav.

  19. Mark Neves - May 12th

    Comes handy just in the right time. you guys rock with all these features. thanx, I hope to see more in the near future…

  20. nveces.com - May 12th

    Great work !. Congratulations !

    http://www.nveces.com

    • Anonymous - May 12th

      Thanks !!

    • Superb information here, ol’e chap; keep brnuing the midnight oil.

    • Enlightening the world, one helpful atcrile at a time.

    • Free info like this is an apple from the tree of konwedlge. Sinful?

      • admin - November 23rd

        Best regards!

      • What I find so interesting is you could never find this aywnhere else.

      • So much info in so few words. Tolsoty could learn a lot.

        • Hello, why should I turn non web-safe fonts into egimas? Everything seems to be fine without doing so. It seems as if my non web-safe font is shown properly as a text on my brand new website, so search engines are able to identify and browsers are able to display.But maybe I’m wrong and live in the illusion of my own mac with firefox and safari??? Must try neighbours windows explorer later on Best wishesSteffie

  21. You’re the graeestt! JMHO

  22. I found just what I was nedeed, and it was entertaining!

  23. Posts like this brighten up my day. Thanks for tanikg the time.

  24. Tip top stuff. I’ll eepxct more now.

  25. Now I feel stpiud. That’s cleared it up for me

  26. My hat is off to your auttse command over this topic-bravo!

  27. Tori - October 9th

    You’re a real deep thinker. Thanks for shraing.

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

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

  30. What a joy to find such clear thinking. Thanks for potsnig!

  31. Economies are in dire srttais, but I can count on this!

  32. You put the lime in the coconut and drink the acrtile up.

  33. Pheonmeanl breakdown of the topic, you should write for me too!

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

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

  36. Heck yeah this is exactly what I neeedd.

  37. Holy shnizit, this is so cool thank you.

  38. I am tolatly wowed and prepared to take the next step now.

  39. Wow, that’s a really cevler way of thinking about it!

  40. Wow, this is in every rsepect what I needed to know.

  41. admin - November 21st

    Best regards

  42. admin - November 21st

    Glad our piece is of use to you.

  43. Walking in the presence of giants here. Cool thinking all aorund!

  44. admin - November 21st

    Thanks for the recognition to our work, Best Regards.

  45. Always refreshing to hear a rational anwesr.

  46. Bubba - January 29th

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

  47. admin - November 21st

    We’ll be glad to consider it. Best regards

  48. admin - November 21st

    You’re welcome. Best regards

  49. admin - November 21st

    Bests regards

  50. admin - November 24th

    welcome. Best regards.

  51. admin - November 24th

    Be on the lookout for upcoming posts on the matter, Best regards

  52. admin - November 24th

    Best regards..

  53. admin - November 24th

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

  54. admin - November 24th

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

  55. admin - November 24th

    You

  56. admin - November 24th

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

  57. admin - November 24th

    You

  58. You get a lot of respect from me for writing these helpful atrciles.

  59. admin - January 30th

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

  60. It would be a really cool trick, aguohtlh it doesn’t work properly always: e.g. if the user is surfing the web with firefox most probably he/she will see a squared shadow framing the text. I would strongly recommend to use tools such as photoshop and create text-image file in giff format (which also easily support the transparent background and it’s definitely light weight).btw thanx for the blog, it’s nice and helpful!!

  61. admin - April 2nd

    Hello Kamyla! I’m glad to see you’ve enjoyed this post, and thanks to you actually for your appreciation. keep updated with new blog entries.

    regards!

  62. Homepage says:

    … [Trackback]…

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

  63. What says:

    [...] CSS Shadow Generator, from WordPressThemeShock, includes more than eight shadow styles, blur, opacity, and position handlers, and a real-time preview for both the source code and the design. [...]

  64. What says:

    [...] CSS Shadow Generator, from WordPressThemeShock, includes more than eight shadow styles, blur, opacity, and position handlers, and a real-time preview for both the source code and the design. [...]

  65. What says:

    [...] CSS Shadow Generator, from WordPressThemeShock, includes more than eight shadow styles, blur, opacity, and position handlers, and a real-time preview for both the source code and the design. [...]

  66. What says:

    [...] CSS Shadow Generator, from WordPressThemeShock, includes more than eight shadow styles, blur, opacity, and position handlers, and a real-time preview for both the source code and the design. [...]

  67. What says:

    [...] CSS Shadow Generator, from WordPressThemeShock, includes more than eight shadow styles, blur, opacity, and position handlers, and a real-time preview for both the source code and the design. [...]

  68. [...] CSS Shadow Generator, from WordPressThemeShock, includes more than eight shadow styles, blur, opacity, and position handlers, and a real-time preview for both the source code and the design. [...]

  69. [...] CSS Shadow Generator, from WordPressThemeShock, includes more than eight shadow styles, blur, opacity, and position handlers, and a real-time preview for both the source code and the design. [...]

  70. What says:

    [...] machines, and includes a number of tools for managing your RSS subscriptions.CSS Shadow GeneratorCSS Shadow Generator, from WordPressThemeShock, includes more than eight shadow styles, blur, opacity, and position [...]

  71. [...] CSS Shadow Generator [...]

  72. [...] Open Graph With WordPress (Tutorial) Integrate Facebook Open Graph With WordPress (Tutorial) →CSS Shadow Generator CSS Shadow Generator →Agency – Free Magazine Style WordPress Theme Agency – Free [...]

  73. [...] CSS3 drop shadow generator [...]