CSS Tools
Posted in
458
4:15 am, March 24, 2023
CSS Drop Filter Shadow Creator
This page generates a nice css drop filter shadow with lots of options to change the shadow width and height and other various useful drop shadow settings.
What does it do?
It generates code like this that makes it a bit easier to generate drop shadows. and the filter css drop shadow that you can add to a class.
How do i use it?
Just go into the generator tool, and change the settings then you need to copy the css box shadow, into a new class. Like the one in the demo below to apply the box shadow effects to the element.
CSS
box-shadow:
3.4px 3.4px 2.7px rgba(0, 0, 0, 0.022),
8.7px 8.7px 6.9px rgba(0, 0, 0, 0.031),
17.7px 17.7px 14.2px rgba(0, 0, 0, 0.039),
36.5px 36.5px 29.2px rgba(0, 0, 0, 0.048),
100px 100px 80px rgba(0, 0, 0, 0.07)
;Tool Source
CSS Drop Filter Shadow Creator Demo
View Demo Full Screen View Demo New Tab
CSS Drop Filter Shadow Creator Code
HTML
<div class='my-test-shadow'>My Test Shadow Box</div>
<h2></h2>
<iframe src="https://shadows.brumm.af/" height="900" width="100%"></iframe>CSS
.my-test-shadow {
box-shadow:
3.4px 3.4px 2.7px rgba(0, 0, 0, 0.022),
8.7px 8.7px 6.9px rgba(0, 0, 0, 0.031),
17.7px 17.7px 14.2px rgba(0, 0, 0, 0.039),
36.5px 36.5px 29.2px rgba(0, 0, 0, 0.048),
100px 100px 80px rgba(0, 0, 0, 0.07)
;
border-radius:15px;
background:#FFF;
padding:10px;
min-height:100px;
min-width:100px;
}Related Tags
Add Comment
Other Items in CSS Tools
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript
Random Quote
