CSS filter Property
CSS filter Property
The filter property is used to specify visual effects to an element like an image or video.
Default Value:-
The default value is none.
Syntax:-
Its syntax is:- filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Further Explanation:-
| Filter | Description |
|---|---|
| none | Specifies no effects |
| blur(px) | Applies a blur effect to the image. |
| brightness(%) | Adjusts the brightness of the image. |
| contrast(%) | Adjusts the contrast of the image. |
| drop-shadow(h-shadow v-shadow blur spread color) | Applies a drop shadow effect to the image. |
| grayscale(%) | Converts the image to grayscale. |
| hue-rotate(deg) | Applies a hue rotation on the image. |
| invert(%) | Inverts the samples in the image. |
| opacity(%) | Sets the opacity level for the image. |
| saturate(%) | Saturates the image. |
| sepia(%) | Converts the image to sepia.. |
| url() | The url() function takes the location of an XML file that specifies an SVG filter. |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Code Explanation
All Tutorials related to CSS Properties
accent-color Property in CSS
align-content Property in CSS
align-items Property in CSS
align-self Property in CSS
all Property in CSS
animation Property in CSS
animation-delay Property in CSS
animation-direction Property in CSS
animation-duration Property in CSS
animation-fill-mode Property in CSS
animation-iteration-count Property in CSS
animation-name Property in CSS
animation-play-state Property in CSS
animation-timing-function Property in CSS
backdrop-filter Property in CSS
backface-visibility Property in CSS
background Property in CSS
background-attachment Property in CSS
background-blend-mode Property in CSS
background-clip Property in CSS
background-color Property in CSS
background-image Property in CSS
background-origin Property in CSS
background-position Property in CSS
background-repeat Property in CSS
background-size Property in CSS
border Property in CSS
border-bottom Property in CSS
border-bottom-color Property in CSS
border-bottom-left-radius Property in CSS
border-bottom-right-radius Property in CSS
border-bottom-style Property in CSS
border-bottom-width Property in CSS
border-collapse Property in CSS
border-color Property in CSS
border-image Property in CSS
border-image-outset Property in CSS
border-image-repeat Property in CSS
border-image-slice Property in CSS
border-image-source Property in CSS
border-image-width Property in CSS
border-left Property in CSS
border-left-color Property in CSS
border-left-style Property in CSS
border-left-width Property in CSS
border-radius Property in CSS
border-right Property in CSS
border-right-color Property in CSS
border-right-style Property in CSS
border-right-width Property in CSS
border-spacing Property in CSS
border-style Property in CSS
border-top Property in CSS
border-top-color Property in CSS
border-top-left-radius Property in CSS
border-top-right-radius Property in CSS
border-top-style Property in CSS
border-top-width Property in CSS
CSS border-width Property
bottom Property in CSS
box-decoration-break Property in CSS
box-shadow Property in CSS
box-sizing Property in CSS
break-after Property in CSS
break-before Property in CSS
break-inside Property in CSS
caption-side Property in CSS
caret-color Property in CSS
@charset Rule in CSS
clear Property in CSS
clip Property in CSS
color Property in CSS
column-count Property in CSS
column-fill Property in CSS
column-gap Property in CSS
column-rule Property in CSS
column-rule-color Property in CSS
column-rule-style Property in CSS
column-rule-width Property in CSS
column-span Property in CSS
column-width Property in CSS
columns Property in CSS
content Property in CSS
counter-increment Property in CSS
counter-reset Property in CSS
cursor Property in CSS
direction Property in CSS
display Property in CSS
empty-cells Property in CSS
filter Property in CSS
flex Property in CSS
flex-basis Property in CSS
flex-direction Property in CSS
flex-flow Property in CSS
flex-grow Property in CSS
flex-shrink Property in CSS
flex-wrap Property in CSS
float Property in CSS
font Property in CSS
@font-face Rule in CSS
font-family Property in CSS
font-feature-settings Property in CSS
font-kerning Property in CSS
font-size Property in CSS
font-stretch Property in CSS
font-style Property in CSS
font-variant Property in CSS
font-variant-caps Property in CSS
font-weight Property in CSS
gap Property in CSS
grid Property in CSS
grid-area Property in CSS
grid-auto-columns Property in CSS
grid-auto-flow Property in CSS
grid-auto-rows Property in CSS
grid-column Property in CSS
grid-column-end Property in CSS
grid-column-gap Property in CSS
grid-column-start Property in CSS
grid-gap Property in CSS
grid-row Property in CSS
grid-row-end Property in CSS
grid-row-gap Property in CSS
grid-row-start Property in CSS
grid-template Property in CSS
grid-template-areas Property in CSS
grid-template-columns Property in CSS
grid-template-rows Property in CSS
hanging-punctuation Property in CSS
height Property in CSS
hyphens Property in CSS
image-rendering Property in CSS
isolation Property in CSS
justify-content Property in CSS
@keyframes Rule in CSS
left Property in CSS
letter-spacing Property in CSS
line-height Property in CSS
list-style Property in CSS
list-style-image Property in CSS
list-style-position Property in CSS
list-style-type Property in CSS
margin Property in CSS
margin-bottom Property in CSS
margin-left Property in CSS
margin-right Property in CSS
margin-top Property in CSS
mask-image Property in CSS
mask-mode Property in CSS
mask-origin Property in CSS
mask-position Property in CSS
mask-repeat Property in CSS
mask-size Property in CSS
max-height Property in CSS
max-width Property in CSS
@media Rule in CSS
min-height Property in CSS
min-width Property in CSS
mix-blend-mode Property in CSS
object-fit Property in CSS
object-position Property in CSS
opacity Property in CSS
order Property in CSS
orphans Property in CSS
outline Property in CSS
outline-color Property in CSS
outline-offset Property in CSS
outline-style Property in CSS
outline-width Property in CSS
overflow Property in CSS
overflow-wrap Property in CSS
overflow-x Property in CSS
overflow-y Property in CSS
padding Property in CSS
padding-bottom Property in CSS
padding-left Property in CSS
padding-right Property in CSS
padding-top Property in CSS
page-break-after Property in CSS
page-break-before Property in CSS
page-break-inside Property in CSS
perspective Property in CSS
perspective-origin Property in CSS
pointer-events Property in CSS
position Property in CSS
quotes Property in CSS
resize Property in CSS
right Property in CSS
row-gap Property in CSS
scroll-behavior Property in CSS
tab-size Property in CSS
table-layout Property in CSS
text-align Property in CSS
text-align-last Property in CSS
text-decoration Property in CSS
text-decoration-color Property in CSS
text-decoration-line Property in CSS
text-decoration-style Property in CSS
text-decoration-thickness Property in CSS
text-emphasis Property in CSS
text-indent Property in CSS
text-justify Property in CSS
text-overflow Property in CSS
text-shadow Property in CSS
text-transform Property in CSS
top Property in CSS
transform Property in CSS
transform-origin Property in CSS
transform-style Property in CSS
transition Property in CSS
transition-delay Property in CSS
transition-duration Property in CSS
transition-property Property in CSS
transition-timing-function Property in CSS
unicode-bidi Property in CSS
user-select Property in CSS
vertical-align Property in CSS
visibility Property in CSS
white-space Property in CSS
widows Property in CSS
width Property in CSS
word-break Property in CSS
word-spacing Property in CSS
word-wrap Property in CSS
writing-mode Property in CSS
z-index Property in CSS
