bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInDown

bounceInLeft

bounceInRight

bounceOutDown

bounceOutLeft

ounceOutRight

bounceOutUp


#ffe1e1
#ff7b7b
#ff545e

#589ea5
#6ec2b1
#95e3bb

#4cae6a
#91cfa4
#b3e8b2

#fdbdbd
#fa5a5a
#E35252

#ffad84
#ff691e
#E8601B

#f9edc1
#f0d264
#DBC05B

#169499
#1bbcc2
#7fccde

#608FBF
#6698cb
#b2cbe5

#BD8EB7
#cb99c5
#edddeb

#72B08E
#82c8a0
#c9e7d6

#587976
#8caba8
#c7d6d5

#3aa903
#62fb17
#a6fd7b

#f08080
#ffb3ba
#ffdfba

#e39e54
#fff68f
#ffffba

#007f53
#00E595
#baffc9

#006666
#00cccc
#bae1ff

#6b4a5c
#a2798f
#d7b8ff

Some Fancy Header Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Neon HEX Color Codes:

Neon Yellow:

#FFCC00
#D7E401
#DAEE01
#FFFF00
#FFFF33
#F2EA02
#E6FB04

Neon Red:

#FF0000
#FD1C03
#FF3300
#FF6600
#FF9801

Neon Green:

#83F52C
#00FF00
#00FF33
#00FF66
#33FF00

Neon Blue:

#2EC872
#00FFFF
#099FFF
#0062FF
#0033FF

Neon Pink:

#FF1C49
#FD349C
#E61678
#FF0066
#FF00FF
#FF00CC
#FF0099

Neon Purple:

#9D00FF
#CC00FF
#6E0DD0
#9900FF
#B66488
#B763FA
#000

This text will scroll from bottom to up This text will scroll from left to right This is basic example of marquee This example will take only 50% width Reoccuring Marquee <<<Opposite Direction Marquees>>>
JavaScript Free Code

CSS Gradient Overtop Image On Hover


I n e v e r y T h e r o f f i s a H e r o

Enter Text

Bam!

Wicked
Cool!


USING CSS

  • S I M P L E A R C
  • R E V E R S E D A R C
  • A U T O R A D I U S T E X T A L L O V E R

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus euismod odio, a interdum elit venenatis non. Vestibulum molestie nisi sapien, vel egestas risus tristique vitae. Etiam non nisi luctus, malesuada nibh eget, viverra ante. Praesent at velit imperdiet enim condimentum consectetur eu sed nisl. Sed lorem dolor, efficitur at efficitur ac, euismod et neque. Nulla sit amet elit sem. Nullam ac malesuada magna, id auctor purus. Praesent viverra fermentum odio.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus euismod odio, a interdum elit venenatis non. Vestibulum molestie nisi sapien, vel egestas risus tristique vitae. Etiam non nisi luctus, malesuada nibh eget, viverra ante. Praesent at velit imperdiet enim condimentum consectetur eu sed nisl. Sed lorem dolor, efficitur at efficitur ac, euismod et neque. Nulla sit amet elit sem. Nullam ac malesuada magna, id auctor purus.


Hoverable Dropdown

Move the mouse over the button to open the dropdown menu.

Hoverable Dropup

Just Example text...

JustExample text...

Move the mouse over the button to open the dropup menu.

Collapsibles

A Collapsible:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Collapsible Set:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Click on the buttons inside the tabbed menu:

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Home

Home is where the heart is..

News

Some news this fine day!

Contact

Get in touch, or swing by for a cup of coffee.

About

Who we are and what we do.

Hummingbird

Hummingbirds are seen as seemingly tireless. They always seek the sweetest nectar, reminding us to forever seek out the good and bask in the beauty of life. They float free of time, carrying our hopes for love, joy and celebration. It’s said if a hummingbird shows up in your life, it’s a good time to evaluate where you’re using your energy. Is it on worry, fear and lacking or something more positive?

The Hummingbird: A Symbol of Significance
Hummingbird

Hummingbirds are seen as seemingly tireless. They always seek the sweetest nectar, reminding us to forever seek out the good and bask in the beauty of life. They float free of time, carrying our hopes for love, joy and celebration. It’s said if a hummingbird shows up in your life, it’s a good time to evaluate where you’re using your energy. Is it on worry, fear and lacking or something more positive?

The Hummingbird: A Symbol of Significance

grade1

grade2

grade3

grade4

grade5

grade6

grade7

grade8

grade9

grade10

grade11

0deg

90deg

180deg

-90deg

Some Fancy Header Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

I LOVE YOU

LOVE YOU

Love You

HoverMe Beautiful!

Making the Web Beautiful!

Stroke of Genius

Ol' Standard Arial

Thick Text Shadow Only Problem

w3-tiny
w3-small
w3-medium (Default)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
WordArt

This is heading 1

This is heading 2

I am targeted but i am not. turpis egestas. Vestibulum tortor quam, feugiat vitae, I'm also targeted cuz i'm in a different tag eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque id blanditiis cupiditate ipsam esse debitis nesciunt doloribus ratione itaque rem. Itaque assumenda alias ut provident animi porro nihil facilis sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio officia mollitia debitis nam corporis facere atque minima cumque amet sint commodi aspernatur fugiat quae dicta quidem sequi excepturi error. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quisquam error recusandae modi nostrum adipisci numquam ullam architecto vitae odio incidunt voluptas dolore fugiat! Ipsum voluptatem ipsa molestiae quasi incidunt!

Itaque assumenda alias ut provident animi porro nihil facilis sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio officia mollitia debitis nam corporis facere atque minima cumque amet sint commodi aspernatur fugiat quae dicta quidem sequi excepturi error. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quisquam error recusandae modi nostrum adipisci numquam ullam architecto vitae odio incidunt voluptas dolore fugiat! Ipsum voluptatem ipsa molestiae quasi incidunt!

Notes

Danger! Some text...

Success! Some text...

Info! Some text...

Warning! Some text...

Dancing The sky was cloudless and of a deep dark blue.

Christmas The sky was cloudless and of a deep dark blue.

Gloria The sky was cloudless and of a deep dark blue.

Vibes The sky was cloudless and of a deep dark blue.

Indie The sky was cloudless and of a deep dark blue.

Script & Style

This is some blinking text.

Something’s not quite level here.

Script & Style

rotateX
rotateY
rotateZ

Arima, She stared through the window at the stars.

Indie, A shining crescent far beneath the flying vessel.

Satisfy, A red flair silhouetted the jagged edge of a wing.

Dancing, Almost before we knew it, we had left the ground.

Vibes, Then came the night of the first falling star.

Clicker, Then came the night of the first falling star.

, Almost before we knew it, we had left the ground.

Bonbon, A red flair silhouetted the jagged edge of a wing.

blue, A shining crescent far beneath the flying vessel.

blue2, She stared through the window at the stars.

blue3, Making the Web Beautiful!

fancy-text-1, Making the Web Beautiful!

ChristmasB,The spectacle before us was indeed sublime.

ChristmasA,The spectacle before us was indeed sublime.


Mouse over the links and watch them change layout:

This link changes color

This link changes font-size

This link changes background-color

This link changes font-family

This link changes text-decoration

h1.New

h2.New

h3.New

h4.New

h5.New
h6.New

perfect

amp

blurd

brandname

gradient

Retro

Heading 1 (blue-shadow)

Heading 1 (red-shadow)

Heading 1 (center)

Heading 2 (left)

Heading 3 (right)

Heading 4 (justify)

w3-tiny
w3-small
w3-medium (Default)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo

Responsive


Heading 1 (36px)

Heading 2 (30px)

Heading 3 (24px)

Heading 4 (20px)

Heading 5 (18px)
Heading 6 (16px)

wobble hover

nausea


LOVE
LOVE
Diffuse light

stack1

Define multiple shadows.stack1

stack2

Define multiple shadows with blur effect.stack2

inset1

The inset1 keyword changes the shadow to one inside the frame.

inset2

Inset2, red and blur.

The border-style Property

This property specifies what kind of border to display:

A border border.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

No border.

A mixed border.

The border-radius Property

This property is used to add rounded borders to an element:

Normal border

Round border

Rounder border

Roundest border

The border-bottom Property

This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.

Current Buttons

Micro
Button Colors

Change the background color of a button with the background-color property:

Rounded Buttons

Add rounded corners to a button with the border-radius property:

2px 4px 6px 8px 12px 50%
Button Sizes
Colored Button Borders

Use the border property to add a border to the button:

Fading Buttons - "Fade in Effect"


Gradient buttons
Sizes
Circle buttons

Colors in Palette

Color Hex RGB
#df8f9f (223,143,159)
#dd9e8f (221,158,143)
#dbbc8f (219,188,143)
#d9d88e (217,216,142)
#bbd78e (187,215,142)

Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.

Making the Web Beautiful!

Marquee's

Scrolling text...

Left to right...

Scrolling down...

Slide-in text.

In this example, the image will float to the left in the paragraph, and the text in the paragraph will wrap around the image.

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

The display Property

display: inline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

display: inline-block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

display: block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.


Dropdown Image

Move the mouse over the image below to open the dropdown content.

Trolltunga Norway
Trolltunga Norway
So God mmade a Farmers Daughter
background: rgba(255, 0, 0, 0.1)
background: rgba(255, 0, 0, 0.2)
background: rgba(255, 0, 0, 0.3)
background: rgba(255, 0, 0, 0.4)
background: rgba(255, 0, 0, 0.5)
background: rgba(255, 0, 0, 0.6)
background: rgba(255, 0, 0, 0.7)
background: rgba(255, 0, 0, 0.8)
background: rgba(255, 0, 0, 0.9)
#00cccc
#fff68f
#f08080
#00e595
#da6f2b
#d7b8ff
#e03f3f
#59a627
#4464a1
#dbbc8f
#bbd78e
rgba(0,204,204, 0.9)
background: rgb(255, 0, 0)

Hover over the div element below, to see the transition effect:

hover on me

Hover a box

Text

Text

Text

Text

Text

Image Swap on Hover with CSS

Card Back Card Front

The border-radius Property

Rounded corners for an element with a specified background color:

Rounded corners!

Rounded corners for an element with a border:

Rounded corners!


Rounded corners for an element with a background image:

Rounded corners!

Elliptical border - border-radius: 50px / 15px:


Elliptical border - border-radius: 15px / 50px:

Ellipse border - border-radius: 50%:


Four values - border-radius: 15px 50px 30px 5px:

Three values - border-radius: 15px 50px 30px:


Two values - border-radius: 15px 50px:

One value - border-radius: 50%:

One value - border-radius: 15px:

Default list:

    • Coffee
    • Tea
    • Coca Cola

    Remove bullets, margin and padding:

    • Coffee
    • Tea
    • Coca Cola

    Default list:

    1. Coffee
    2. Tea
    3. Coca Cola
6 of 12
6 of 12
7 of 12
5 of 12
8 of 12
4 of 12
9 of 12
3 of 12
10 of 12
2 of 12
11 of 12
1 of 12
12 of 12

hr divid styles


0

1

2

3

4

5

6

7

8

sexy_line

rainbow

The outline-style Property

A dotted outline

A dashed outline

A solid outline

A double outline

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

Some Font Awesome icons:

Styled Font Awesome icons (size and color):

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.


Colors in Palette

Color Hex RGB
#df8f9f (223,143,159)
#dd9e8f (221,158,143)
#dbbc8f (219,188,143)
#d9d88e (217,216,142)
#bbd78e (187,215,142)

The border-color Property

This property specifies the color of the four borders:

A solid red border

A solid green border

A solid multicolor border

The border-radius Property

This property is used to add rounded borders to an element:

Normal border

Round border

Rounder border

Roundest border

A solid red border

A solid green border

A solid multicolor border

Click me to toggle


Hover on the image


"

Full Page Background Image

Hummingbirds are seen as seemingly tireless. They always seek the sweetest nectar, reminding us to forever seek out the good and bask in the beauty of life. They float free of time, carrying our hopes for love, joy and celebration. It’s said if a hummingbird shows up in your life, it’s a good time to evaluate where you’re using your energy. Is it on worry, fear and lacking or something more positive?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Hello there.

Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.

Making the Web Beautiful!

  space

  ¼ cup, ½ cup, ¾ cup

&&

© copywrite ©

85 F°

¼ cup, ½ cup, ¾ cup  


bkg-img

.bkg-color


Dropdown Image

Move the mouse over the image below to open the dropdown content.

Trolltunga Norway
Trolltunga Norway
So God mmade a Farmers Daughter

Image Text

How to place text over an image:

Snow
Bottom Left
Top Left
Top Right
Bottom Right
Centered

1
2

Full Page Background Image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Image Swap on Hover with CSS

Card Back Card Front

Lorem Ipsum Dolor

Hot dogs, Armour hot dogs. What kind of kids eat Armour hot dogs? Fat kids, skinny kids, kids who climb on rocks. Tough kids, sissy kids, even kids with chicken pox love hot dogs, Armour hot dogs... The dogs kids love to bite!

Notebook

Heading

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.


Image modalM

In this example, we use CSS to create a modalM (dialog box) that is hidden by default.

We use JavaScript to trigger the modalM and to display the current image inside the modalM when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image captionM text inside the modalM.

Ivan Theroff
×

Image Text Blocks

How to place text blocks over an image:

Nature

Hero

There is a hero in every Theroff! Ivan Theroff


Image Transparency

The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

Forest Mountains Italy

Image Transparency

The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

Forest Mountains Italy

testing

Applies a blur effect to the image. A larger value will create more blur. If no value is specified, 0 is used.

testing
testing

Converts the image to grayscale. 0% (0) is default and represents the original image. 100% will make the image completely gray (used for black and white images). Note: Negative values are not allowed.

testing

Converts the image to sepia.
0% (0) is default and represents the original image. 100% will make the image completely sepia.
Note: Negative values are not allowed.


testing

Saturates the image. 0% (0) will make the image completely un-saturated. 100% is default and represents the original image. Values over 100% provides super-saturated results. Note: Negative values are not allowed.

testing

Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. 0deg is default, and represents the original image. Note: Maximum value is 360deg.

testing

Inverts the samples in the image. 0% (0) is default and represents the original image. 100% will make the image completely inverted. Note: Negative values are not allowed.

testing

Sets the opacity level for the image. The opacity-level describes the transparency-level, where: 0% is completely transparent. 100% (1) is default and represents the original image (no transparency). Note: Negative values are not allowed. Tip: This filter is similar to opacity property.


testing

Adjusts the brightness of the image. 0% will make the image completely black. 100% (1) is default and represents the original image. Values over 100% will provide brighter results.

testing

Adjusts the contrast of the image. 0% will make the image completely black. 100% (1) is default and represents the original image. Values over 100% will provide results with less contrast.

testing

Applies a drop shadow effect to the image.

Possible values: h-shadow - Required. Specifies a pixel value for the horizontal shadow. Negative values place the shadow to the left of the image.

v-shadow - Required. Specifies a pixel value for the vertical shadow. Negative values place the shadow above the image.

blur - Optional. This is the third value, and must be in pixels. Adds a blur effect to the shadow. A larger value will create more blur (the shadow becomes bigger and lighter). Negative values are not allowed. If no value is specified, 0 is used (the shadow's edge is sharp).

spread - Optional. This is the fourth value, and must be in pixels. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).

color: Optional. Adds a color to the shadow. If not specified, the color depends on the browser (often black). Tip: This filter is similar to the box-shadow property.

testing

Applies a sepia effect to the image.


testing

Applies a grayscale effect to the image.

testing

Applies contrast(1.4) saturate(1.8) sepia(.6) effect to the image.

testing

Applies blend effect to the image.

testing

Applies blend multiply effect to the image.


gradient-fade overlay

contener4

wrapper2

the title read more
cat-image
cat2-image

overlay options
Text will flow....purple-grad
overlay options
Text will flow....purple-grad
image mask overlay
tint paralex

CSS Tinted Background Overlay


Gradient over image 1

My photo

wrapper-1

Stuff goes in here

gradient-image-bkg

dimmed


Image Hover Effects - Return to Design Shack

city

sea

Transition Sampler

Click me to toggle


Hover on the image


Image Text

How to place text over an image:

Horse
Bottom Left
Top Left
Top Right
Bottom Right
Centered

strong overlay

Animation of filter

Cat

Image samples

transformed-1
transformed-2
transformed-3
transformed-4

picture skewed
pictureskewer
circular-image
inline style Horses

Example Shapes
Sample diamonds
hexagon

Car
pageOption
Horses triangle

test1
Horses
test2
Horses
test3
Horses

pageOption2

W3 Shapes

Car
Nice Car

Oh Panda!

Oh Panda!

The filter Property

Darker
Normal
Lighter

w3

W3 Shapes


Car
Car
Car
Car
Car
Car
Car
Car

Dropdown Image

Trolltunga Norway
Trolltunga Norway
So God mmade a Farmers Daughter

Polaroid Images / Cards

The box-shadow property can be used to create paper-like cards:

Norway

Hardanger, Norway

Pulpit rock

The pulpit rock in Lysefjorden, Norway.

Monterosso al Mare

Monterosso al Mare. One of the five villages in Cinque Terre, Italy.

Uncle Sam Ampitheatre

CSS3 Transform Sampler

transform-translate
transform-scale
scale from top

CSS3 Transform Sampler

scale-horizontal
transform-skew
transform-rotate

CSS3 Transform Sampler

combo: rotate, scale
animate-transform-scale
bloat

Sticky Image: Scroll Down to See the Effect

The image will "stick" to the screen when you reach its scroll position.

Avatar

Scroll Down

Some example text..

Scroll back up again to "remove" the sticky position.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet

I will stick to the screen when you reach my scroll position

nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Dad Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.


Shadows

.bxshadow-1
.bxshadow-2
.bxshadow-3
.bxshadow-4
.bxshadow-5

Gradient

purple-grad
blue-grad
aqua-grad
peach-grad

500x300

Pretty Pair

Change color on page...

INFO

Chihuahua-Puppy

Chihuahua-Puppy

Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...

INFO

Automatic Slideshow

Change image every 2 seconds:

1 / 3
Caption Text


Converters

Type a value in any of the fields to convert between temperature measurements:

Type a value in any of the fields to convert between weight measurements:

Type a value in any of the fields to convert between Length measurements:


photo
Culinary

Cheat day inspirations

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Button
Card image cap

Alison Belmont

Graffiti Artist

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.


Card image cap

Alison Belmont

Graffiti Artist

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Card image cap
Culinary

Cheat day inspirations

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Button
Card image cap

Billy Coleman

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.


Image overlay cards
Software

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project
Marketing

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project

Anna Doe


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci

Anna Doe


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci


Reversed cascade card
Card image cap

My adventure

Photography

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.

Cards with action button
sample

Card title


Some quick example text to build on the card title and make up the bulk of the card's content.

work desk

Card title


Some quick example text to build on the card title and make up the bulk of the card's content.

Read more
Hello!
Card image cap

Alison Belmont

Graffiti Artist

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.


Dad

John Doe


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.

Dad

John Doe


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.

Example photo

John Doe


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.

Example photo

John Doe


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.


Testimonial cards with gradients

Example photo

John Doe


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.

Example photo

Anna Aston


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.

Dad

Maria Kate


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.


Additional gradients

warm-flame-gradient
night-fade-gradient
spring-warmth-gradient
juicy-peach-gradient

young-passion-gradient
lady-lips-gradient
sunny-morning-gradient
rainy-ashville-gradient

frozen-dreams-gradient
winter-neva-gradient
dusty-grass-gradient
tempting-azure-gradient

heavy-rain-gradient
amy-crisp-gradient
mean-fruit-gradient
deep-blue-gradient

ripe-malinka-gradient
cloudy-knoxville-gradient
morpheus-den-gradient
rare-wind-gradient

multi-repeating-linear
stacked-radial
stacked-linear
angled-gradient

diagonal-gradient
horizontal-gradient
simple-linear
block

Welcome to our site!


tint paralex

CSS Tinted Background Overlay

cat-image
cat2-image

cat3-image
cat4-image
cat5-image
cat6-image

Text will flow....purple-grad
Text will flow...peach-grad
Text will flow...aqua-grad
Text will flow...blue-grad

Text will flow...juicy-peach-grad
Text will flow...morpheus-den-grad
Text will flow...lady-lips-grad
Text will flow...sunny-morning-grad

Text will flow...rainy-ashville-grad
Text will flow...frozen-dreams-grad
Text will flow...warm-flame-grad
Text will flow...night-fade-grad

Text will flow....spring-warmth-grad
Text will flow...winter-neva-grad
Text will flow...dusty-grass-grad
Text will flow...tempting-azure-grad

Text will flow...heavy-rain-grad
Text will flow...amy-crisp-grad
Text will flow...mean-fruit-grad
Text will flow...deep-blue-grad

Text will flow...ripe-malinka-grad
Text will flow...cloudy-knoxville-grad
Text will flow...morpheus-den-grad
Text will flow...rare-wind-grad

Text will flow....near-moon-grad
Text will flow...multi-repeating-linear
Text will flow...stacked-radial
Text will flow...stacked-linear

Text will flow...cloudy-knoxville-grad
Text will flow...angled-gradient
Text will flow...diagonal-gradient
Text will flow...horizontal-gradient

Text will flow...simple-linear

Colors

#f44336 red

#e91e63 pink

#9c27b0 purple

#673ab7 deep-purple

#3f51b5 indigo

#2196f3 blue

#03a9f4 light-blue

#00bcd4 cyan

#009688 teal

#4caf50 green

#8bc34a light-green

#cddc39 lime

#ffeb3b yellow

#ffc107 amber

#ff9800 orange

#ff5722 deep-orange

#795548 brown

#607d8b blue-grey

rgba(90,138,139,.09) my-color

#9e9e9e grey

#000000 black

#ffffff white

transparent

rgba(90,138,139,1) my-color

#9e9e9e grey

#000000 black

#ffffff white

transparent

rgba(90,138,139,1) my-color

#9e9e9e grey

#000000 black

#ffffff white

transparent

transparent

transparent

transparent


RGBA Colors

rgba(3, 169, 244, 0.1) rgba-blue-slight

rgba(244, 67, 54, 0.1) rgba-red-slight

rgba(233, 30, 99, 0.1) rgba-pink-slight

rgba(156, 39, 176, 0.1) rgba-purple-slight

rgba(63, 81, 181, 0.1) rgba-indigo-slight

rgba(0, 188, 212, 0.1) rgba-cyan-slight

rgba(0, 150, 136, 0.1) rgba-teal-slight

#rgba(76, 175, 80, 0.1) rgba-green-slight

rgba(205, 220, 57, 0.1) rgba-lime-slight

rgba(255, 235, 59, 0.1) rgba-yellow-slight

rgba(255, 152, 0, 0.1) rgba-orange-slight

rgba(121, 85, 72, 0.1) rgba-brown-slight

rgba(158, 158, 158, 0.1) rgba-grey-slight

rgba(96, 125, 139, 0.1) rgba-blue-grey-slight

rgba(0, 0, 0, 0.1) rgba-black-slight

rgba(62, 69, 81, 0.1) rgba-stylish-slight

rgba(255, 255, 255, 0.1) rgba-white-slight

-

rgba(3, 169, 244, 0.3) rgba-blue-light

rgba(244, 67, 54, 0.3) rgba-red-light

rgba(233, 30, 99, 0.3) rgba-pink-light

rgba(156, 39, 176, 0.3) rgba-purple-light

rgba(63, 81, 181, 0.3) rgba-indigo-light

rgba(0, 188, 212, 0.3) rgba-cyan-light

rgba(0, 150, 136, 0.3) rgba-teal-light

#rgba(76, 175, 80, 0.3) rgba-green-light

rgba(205, 220, 57, 0.3) rgba-lime-light

rgba(255, 235, 59, 0.3) rgba-yellow-light

rgba(255, 152, 0, 0.3) rgba-orange-light

rgba(121, 85, 72, 0.3) rgba-brown-light

rgba(158, 158, 158, 0.3) rgba-grey-light

rgba(96, 125, 139, 0.3) rgba-blue-grey-light

rgba(0, 0, 0, 0.3) rgba-black-light

rgba(62, 69, 81, 0.3) rgba-stylish-light

rgba(255, 255, 255, 0.3) rgba-white-light

rgba(3, 169, 244, 0.7) rgba-blue-strong

rgba(244, 67, 54, 0.7) rgba-red-strong

rgba(233, 30, 99, 0.7) rgba-pink-strong

rgba(156, 39, 176, 0.7) rgba-purple-strong

rgba(63, 81, 181, 0.7) rgba-indigo-strong

rgba(0, 188, 212, 0.7) rgba-cyan-strong

rgba(0, 150, 136, 0.7) rgba-teal-strong

#rgba(76, 175, 80, 0.7) rgba-green-strong

rgba(205, 220, 57, 0.7) rgba-lime-strong

rgba(255, 235, 59, 0.7) rgba-yellow-strong

rgba(255, 152, 0, 0.7) rgba-orange-strong

rgba(121, 85, 72, 0.7) rgba-brown-strong

rgba(158, 158, 158, 0.7) rgba-grey-strong

rgba(96, 125, 139, 0.7) rgba-blue-grey-strong

rgba(0, 0, 0, 0.7) rgba-black-strong

rgba(62, 69, 81, 0.7) rgba-stylish-strong

rgba(255, 255, 255, 0.7) rgba-white-strong


Full Palette

#ffebee red lighten-5

#ffcdd2 red lighten-4

#ef9a9a red lighten-3

#e57373 red lighten-2

#ef5350 red lighten-1

#f44336 red

#e53935 red darken-1

#d32f2f red darken-2

#c62828 red darken-3

#b71c1c red darken-4

#ff8a80 red accent-1

#ff5252 red accent-2

#ff1744 red accent-3

#d50000 red accent-4

#fce4ec pink lighten-5

#f8bbd0 pink lighten-4

#f48fb1 pink lighten-3

#f06292 pink lighten-2

#ec407a pink lighten-1

#e91e63 pink

#d81b60 pink darken-1

#c2185b pink darken-2

#ad1457 pink darken-3

#880e4f pink darken-4

#ff80ab pink accent-1

#ff4081 pink accent-2

#f50057 pink accent-3

#c51162 pink accent-4

#f3e5f5 purple lighten-5

#e1bee7 purple lighten-4

#ce93d8 purple lighten-3

#ba68c8 purple lighten-2

#ab47bc #purple lighten-1

#9c27b0 purple

#8e24aa purple darken-1

#7b1fa2 purple darken-2

#6a1b9a purple darken-3

#4a148c purple darken-4

#ea80fc purple accent-5

#e040fb purple accent-5

#d500f9 purple accent-5

#aa00ff purple accent-4


#ede7f6 deep-purple lighten-5

#d1c4e9 deep-purple lighten-4

#b39ddb deep-purple lighten-3

#9575cd deep-purple lighten-2

#7e57c2 deep-purple lighten-1

#673ab7 deep-purple

#5e35b1 deep-purple darken-1

#512da8 deep-purple darken-2

#4527a0 deep-purple darken-3

#311b92 deep-purple darken-4

#b388ff deep-purple accent-1

#7c4dff deep-purple accent-2

#651fff deep-purple accent-3

#6200ea deep-purple accent-4

#e8eaf6 indigo lighten-5

#c5cae9 indigo lighten-4

#9fa8da indigo lighten-3

#7986cb indigo lighten-2

#5c6bc0 indigo lighten-1

#3f51b5 indigo

#3949ab indigo darken-1

#303f9f indigo darken-2

#283593 indigo darken-3

#1a237e indigo darken-4

#8c9eff indigo accent-1

#536dfe indigo accent-2

#3d5afe indigo accent-3

#304ffe indigo accent-4

#e3f2fd blue lighten-5

#bbdefb blue lighten-4

#90caf9 blue lighten-3

#64b5f6 blue lighten-2

#42a5f5 blue lighten-1

#2196f3 blue

#1e88e5 blue darken-1

#1976d2 blue darken-2

#1565c0 blue darken-3

#0d47a1 blue darken-4

#82b1ff blue accent-1

#448aff blue accent-2

#2979ff blue accent-3

#2962ff blue accent-4


#e1f5fe light-blue lighten-5

#b3e5fc light-blue lighten-4

#81d4fa light-blue lighten-3

#4fc3f7 light-blue lighten-2

#29b6f6 light-blue lighten-1

#03a9f4 light-blue

#039be5 light-blue darken-1

#0288d1 light-blue darken-2

#0277bd light-blue darken-3

#01579b light-blue darken-4

#l80d8ff ight-blue accent-1

#40c4ff light-blue accent-2

#00b0ff light-blue accent-3

#0091ea light-blue accent-4

#e0f7fa cyan lighten-5

#b2ebf2 cyan lighten-4

#80deea cyan lighten-3

#4dd0e1 cyan lighten-2

#26c6da cyan lighten-1

#00bcd4 cyan

#00acc1 cyan darken-1

#0097a7 cyan darken-2

#00838f cyan darken-3

#006064 cyan darken-4

#84ffff cyan accent-1

#18ffff cyan accent-2

#00e5ff cyan accent-3

#00b8d4 cyan accent-4

#e0f2f1 teal lighten-5

#b2dfdb teal lighten-4

#80cbc4 teal lighten-3

#4db6ac teal lighten-2

#26a69a teal lighten-1

#009688 teal

#00897b teal darken-1

#00796b teal darken-2

#00695c teal darken-3

#004d40 teal darken-4

#a7ffeb teal accent-1

#64ffda teal accent-2

#1de9b6 teal accent-3

#00bfa5 teal accent-4


#e8f5e9 green lighten-5

#c8e6c9 green lighten-4

#a5d6a7 green lighten-3

#81c784 green lighten-2

#66bb6a green lighten-1

#4caf50 green

#43a047 green darken-1

#388e3c green darken-2

#2e7d32 green darken-3

#1b5e20 green darken-4

#b9f6ca green accent-1

#69f0ae green accent-2

#00e676 green accent-3

#00c853 green accent-4

#f1f8e9 light-green lighten-5

#dcedc8 light-green lighten-4

#c5e1a5 light-green lighten-3

#aed581 light-green lighten-2

#9ccc65 light-green lighten-1

#8bc34a light-green

#7cb342 light-green darken-1

#689f38 light-green darken-2

#558b2f light-green darken-3

#33691e light-green darken-4

#ccff90 light-green accent-1

#b2ff59 light-green accent-2

#76ff03 light-green accent-3

#64dd17 light-green accent-4

#f9fbe7 lime lighten-5

#f0f4c3 lime lighten-4

#e6ee9c lime lighten-3

#dce775 lime lighten-2

#d4e157 lime lighten-1

#cddc39 lime

#c0ca33 lime darken-1

#afb42b lime darken-2

#9e9d24 lime darken-3

#827717 lime darken-4

#f4ff81 lime accent-1

#eeff41 lime accent-2

#c6ff00 lime accent-3

#aeea00 lime accent-4


#fffde7 yellow lighten-5

#fff9c4 yellow lighten-4

#fff59d yellow lighten-3

#fff176 yellow lighten-2

#ffee58 yellow lighten-1

#ffeb3b yellow

#fdd835 yellow darken-1

#fbc02d yellow darken-2

#f9a825 yellow darken-3

#f57f17 yellow darken-4

#ffff8d yellow accent-1

#ffff00 yellow accent-2

#ffea00 yellow accent-3

#ffd600 yellow accent-4

#fff8e1 amber lighten-5

#ffecb3 amber lighten-4

#ffe082 amber lighten-3

#ffd54f amber lighten-2

#ffca28 amber lighten-1

#ffc107 amber

#ffb300 amber darken-1

#ffa000 amber darken-2

#ff8f00 amber darken-3

#ff6f00 amber darken-4

#ffe57f amber accent-1

#ffd740 amber accent-2

#ffc400 amber accent-3

#ffab00 amber accent-4

#fff3e0 orange lighten-5

#ffe0b2 orange lighten-4

#ffcc80 orange lighten-3

#ffb74d orange lighten-2

#ffa726 orange lighten-1

#ff9800 orange

#fb8c00 orange darken-1

#f57c00 orange darken-2

#ef6c00 orange darken-3

#e65100 orange darken-4

#ffd180 orange accent-1

#ffab40 orange accent-2

#ff9100 orange accent-3

#ff6d00 orange accent-4


#fbe9e7 deep-orange lighten-5

#ffccbc deep-orange lighten-4

#ffab91 deep-orange lighten-3

#ff8a65 deep-orange lighten-2

#ff7043 deep-orange lighten-1

#ff5722 deep-orange

#f4511e deep-orange darken-1

#e64a19 deep-orange darken-2

#d84315 deep-orange darken-3

#bf360c deep-orange darken-4

#ff9e80 deep-orange accent-1

#ff6e40 deep-orange accent-2

#ff3d00 deep-orange accent-3

#dd2c00 deep-orange accent-4

#efebe9 brown lighten-5

#d7ccc8 brown lighten-4

#bcaaa4 brown lighten-3

#a1887f brown lighten-2

#8d6e63 brown lighten-1

#795548 brown

#6d4c41 brown darken-1

#5d4037 brown darken-2

#4e342e brown darken-3

#3e2723 brown darken-4

#fafafa grey lighten-5

#f5f5f5 grey lighten-4

#eeeeee grey lighten-3

#e0e0e0 grey lighten-2

#bdbdbd grey lighten-1

#9e9e9e grey

#757575 grey darken-1

#616161 grey darken-2

#424242 grey darken-3

#212121 grey darken-4


#eceff1 blue-grey lighten-5

#cfd8dc blue-grey lighten-4

#b0bec5 blue-grey lighten-3

#90a4ae blue-grey lighten-2

#78909c blue-grey lighten-1

#607d8b blue-grey

#546e7a blue-grey darken-1

#455a64 blue-grey darken-2

#37474f blue-grey darken-3

#263238 blue-grey darken-4

#000000 black

#ffffff white

transparent

#d0d6e2 my-color lighten-5

#b1bace my-color lighten-4

#929fba my-color lighten-3

#7283a7 my-color lighten-2

#59698d my-color lighten-1

rgba(90,138,139,1) my-color

#3b465e my-color darken-1

#2e3951 my-color darken-2

#1c2a48 my-color darken-3

#1c2331 my-color darken-4


CSS Animations

These properties are animatable in CSS:

Animation of border

Animation of background-color

Animation of box-shadow

anim-

Animation of border-bottom


Animation of border-bottom-left-radius

Animation of border-bottom-right-radius

Animation of border-bottom-width

Animation of border-left


Animation of border-left-width

Animation of border-right

Animation of border-right-width

Animation of border-top


Animation of border-top-left-radius

Animation of border-top-right-radius

Animation of border-top-width

Animation of color

This is a header

This is a paragraph


Animation of filter

Pineapple

Animation of filter

Pineapple

Animation of flex

RED
BLUE
GREEN

Animation of flex-basis

RED
BLUE

Animation of flex-grow

Animation of flex-shrink

Red DIV
Blue DIV

Animation of font

This is a paragraph

Animation of font-size

This is a paragraph


Animation of font-weight

This is a paragraph

Animation of outline

Animation of outline-offset

Animation of outline-width


Animation of perspective

DIV1
Think that you are looking down on a wall. See what happens when you gradually change the perspective!

Animation of perspective-origin

DIV1
DIV2

Animation of transform

anim-transform

Animation of transform-origin

transform-origin1
DIV2
transform-origin2

This is the footer!! Resize the browser window to see how the content respond to the resizing.

This is the footer 2!! Resize the browser window to see how the content respond to the resizing.