Cool Tumblr Effects Codes

admin

Basic HTML Codes

These codes just need to be pasted in the HTML code and directly used. No need to learn about JavaScripts or query to use them. This CSS code offers many beautiful hover effects from changing the image to changing color tone or even the appearance of the data. The effects appear in boxes or vertically and horizontally. As a bonus, you’ll also find background and label effects as well. See the Pen Awesome input focus effects by Takuma.I. Bordering on Groovy. Outlined text can be a powerful asset to any design. Even better if you add a compelling effect, such as this liquid-like flow animation. It would make for a super-cool logo or even header text.

Hey everyone! I decided I would make a little list of basic HTML tags that I think any tumblr user (or internet user, for that matter) should know. They’re very short and easy to remember, so I strongly suggest you memorize these because I’m certain you will find yourself using them.

BOLD FONT:

<b> Your Text </b> (Shortcut: CTRL + B / COMMAND + B on a Mac)

ITALIC FONT:

<i> Your Text </i> (Shortcut: CTRL + I / COMMAND + I on a Mac)

UNDERLINED TEXT:

<u> Your Text </u> (Shortcut: CTRL + U / COMMAND + U on a Mac)

CROSSED OUT TEXT:

<stroke> Your Text </stroke>

CENTERED TEXT:

<center> Your Text </center>

JUSTIFIED TEXT:

<div align=“justify”> Your Text </div> (You can also replace “justify” with “center”, “right” or “left”)

Cool Tumblr Effects Codes 10%

TO MAKE A LINK IN TEXT:

<a href=“URL”> Your Text </a>

TO START A NEW LINE:

<br> Your text. (This does not have a closing tag.)

TO START A NEW PARAGRAPH:

<p> Your text. (This does not have a closing tag.)

DIVIDER:

<hr> (Does not have a closing tag, it simply adds a line between two bodies of text.)

HEADER:

<h1> Your Text </h1>

Smaller headers:

<h2> Your Text </h2>, <h3> Your Text </h3>, etc.

CHANGE FONT SIZE:

<font size=“1”> Your Text </font> (You can change the number, they range from 1 being the smallest to 10 being the largest.)

CHANGE FONT COLOR:

<font color=“#000000”> Your Text </font> (You can change the color by changing the code. You can get more color codes here.)

To be honest, that’s all I can think of at the moment! I’ll be sure to tell you all if I think of anything else.

Also, if you copy/paste any of these codes, be sure to replace the quotation marks or they won’t work. :)

(Source: let-me-tutor-you)

Cool Tumblr Effects Codes
362 notes
  1. needmoresleepers liked this
  2. goldencursive reblogged this from let-me-tutor-you
  3. 10-dough liked this
  4. maldoraan liked this
  5. umychan9 liked this
  6. awaserunohebi liked this
  7. zhonglimain liked this
  8. createdbyinvisiblesouls liked this
  9. chicagosfincst liked this
  10. dare-me-baby liked this
  11. norshii liked this
  12. headlessandhorseless liked this
  13. lembrol liked this
  14. bxlxvet reblogged this from let-me-tutor-you
  15. extenco liked this
  16. arunetoons liked this
  17. thecitybyzantine liked this
  18. alexahrt liked this
  19. radiobtsmex liked this
  20. dgt-ii liked this
  21. jannah-awaits liked this
  22. crylements liked this
  23. h1acynth liked this
  24. anons-and-glasses liked this
  25. rabldcur liked this
  26. divineandmajesticinone liked this
  27. 55oju liked this
  28. shoerin liked this
  29. x-efflorescence-x said: Do these work on mobile? I just tried to underline some text in a post but it didn’t seem to work
  30. soogyu-s liked this
  31. tropinano liked this
  32. asternprotocol liked this
  33. dionysis liked this
  34. carr-crashh-heartss liked this
  35. thatsthequezo liked this
  36. oh-nostalgiaa reblogged this from coredrive
  37. cursed-ghost liked this
  38. joc-cook liked this
  39. allseeingspirit--a liked this
  40. skeleton-gutzz liked this
  41. malkaivian liked this
  42. venusindelusion liked this
  43. sakuusas liked this
  44. arcaneverse liked this
  45. graveyard-pickle liked this
  46. ffsdakota liked this
  47. overwatchrph liked this
  48. c4fecito liked this
  49. umbralulu liked this

Did you know that you can use CSS to create beautiful animations and interesting effects? Combined with HTML and JavaScript, or even on its own, CSS can be extremely powerful. You’d be surprised at what developers can create. From simple scrolling animations to complex environments built entirely of code, these CSS background effects can add a lot of personality to your website.

What if you could use CSS background effects created by others for free? Sites like CodePen were made to host open source or other freely-licensed code, which means you can use it in your own projects with few-to-no stipulations.

This is also helpful for designers who want to learn CSS or pull off a similar, but personalized look. You can use these code snippets as a base to create your own effects.

There are a ton of developers who have created amazing CSS background effects and released them for free. Today we’ve collected 15 of the most stunning ones. See for yourself what you can do with a creative mind and a little code!

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates

Starting at only $16.50 per month!

Parallax Pixel Stars

See the Pen Parallax Star background in CSS by Saransh Sinha (@saransh) on CodePen.light

Gradient Background Animation

See the Pen Pure CSS Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen.light

Frosted Glass Effect

See the Pen CSS only frosted glass effect by Gregg OD (@GreggOD) on CodePen.light

Shooting Star

See the Pen Only CSS: Shooting Star by Yusuke Nakaya (@YusukeNakaya) on CodePen.light

Cool Tumblr Effects Codes Roblox

Fixed Background Effect

Tri Travelers

See the Pen Tri Travelers by Nate Wiley (@natewiley) on CodePen.light

ColorDrops

See the Pen ColorDrops by Nate Wiley (@natewiley) on CodePen.light

Animated Background Header

See the Pen Animated Background Header by Jasper LaChance (@jasperlachance) on CodePen.light

Cool Tumblr Effects Codes Sims 4

Zero Element: DeLight

See the Pen Zero Element: DeLight by Keith Clark (@keithclark) on CodePen.light

Cool Tumblr Effects Codes Code

Glowing Particle Animation

See the Pen CSS Glowing Particle Animation by Nate Wiley (@natewiley) on CodePen.light

Background Image Scroll Effect

See the Pen Pure CSS Background Image Scroll Effect by carpe numidium (@carpenumidium) on CodePen.light

Multiple Background Image Parallax

See the Pen CSS Multiple Background Image Parallax Animation by carpe numidium (@carpenumidium) on CodePen.light

Bokeh Effect

See the Pen Bokeh effect (CSS) by Louis Hoebregts (@Mamboleoo) on CodePen.light

Calm Breeze Login Screen

See the Pen Calm breeze login screen by Lewi Hussey (@Lewitje) on CodePen.light

Effect Text Gradient

See the Pen Effect Text Gradient by Diogo Realles (@SoftwaRealles) on CodePen.light

Creatively Beautiful CSS Background Effects

Good web design leaves a lasting impression on visitors, and there’s always something extra enchanting about a well-made animation. Whether you go all out with an animated starry or gradient background, or you just add some elegant and subtle parallax effects to your site, it can do wonders for your design.

CodePen hosts exclusively open source code, made by developers as a contribution to the community. So, if one of these effects caught your eye, feel free to copy it, tweak it, or use it as a base for making your own CSS animations.

Just remember to use the same license, and everything on CodePen is free to use.

Editor’s note: this article was last updated on Sept. 2, 2020

This post may contain affiliate links. See our disclosure about affiliate links here.