Text Shadows
A text-shadow can be added to text with three or four values set. The value that is not required is the blur amount. You can also add more than one text shadow to an element by adding multiple shadows separated by commas when adding to CSS. Be careful with a text shadow, as they can hurt readability.
text-shadow: offset-x offset-y blur-radius color;
Box Shadows
Box shadows can add a lot of detail to a page. For elements with a hover state, a shadow can be adjusted in size and spread to make the element look like it is getting closer to the page behind it. You can also use multiple shadows to create other effects by separating them with a comma. The box shadow will respect the shape of an element with a border radius. At a minimum, a box-shadow requires two values, which will be used as the x offset and y offset.
box-shadow: offset-x offset-y blur-radius spread-radius color;
Rounded Corners
A border-radius can be used to round some or all of the corners on an element. These can be left rounded, or the rounding can change on an action like hover. When you want to create a circle, remember that as long as your element is square, a 50% border radius will turn it into a circle.
border-radius: 10px; /* all four corners the same */
border-radius: 10px 20px; /* top-left/bottom-right top-right/bottom-left */
border-radius: 10px 20px 15px; /* top-left top-right/bottom-left bottom-right */
border-radius: 10px 5px 15px 20px; /* top-left top-right bottom-right bottom-left */
Border Images
An image can be added as a border to an element, but there are special considerations to this. These images need to have sides that can easily be repeated and sliced or stretched without becoming distorted.
border-image: source slice width outset repeat;
Linear Gradients
In web design, linear-gradients can be used in many ways. These can add a background to an element or page, can be used to create CSS art, or can be used to make elements appear to shine. They can show a transition from one color to another, or can include multiple colors and transition between all of them.
/* A gradient tilted 45 degrees, starting blue and finishing red */
linear-gradient(45deg, blue, red)
Radial Gradients
/* A gradient at the center of its container, starting red, changing to blue, and finishing green */
radial-gradient(circle at center, red 0, blue, green 100%)
Filters
/* Find more filter settings on MDN */
filter: drop-shadow: 0 0 0.25rem var(--med-gray);
filter: grayscale(50%);
