Apply Cool Linear and Radial Gradients Using CSS

Published September 20, 2017 by saurav.roy.

Gradient backgrounds are nice ways of displaying smooth transitions between two or more colors. Instead of relying on a graphic design software like Photoshop to create these effects, you can use simple CSS3 linear and radial gradients to create cool designs.

Apart from saving money on an expensive graphics software package, another great advantage of using CSS for gradients is that download times are significantly cut. While most people nowadays have high-speed internet connections, there are still some people with slower connections, or who use cellular data on mobile devices.

Various browsers support these gradient style properties:

Chrome 26.0, Internet Explorer 10.0, Firefox 16.0, Safari 6.1, and Opera 12.1

  • linear-gradient
  • radial-gradient
  • repeating-linear-gradient
  • repeating-radial-gradient

CSS3 Linear Gradients

Linear gradients can go down, up, left, right, or diagonally. In order to define a linear gradient, you will have to define two or more color stops – the colors you want to create smooth transitions with. In addition, you also have to set a starting point and direction or angle.

The basic syntax for this is:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Top to Bottom Gradient

In the following example, the linear gradient goes from green (top) to yellow (bottom):


#grad1 {

height: 200px;

background: linear-gradient(green, yellow);


Linear Left to Right Gradient

In the following example, the linear gradient goes from blue (left) to violet (right):


#grad2 {

height: 200px;

background: linear-gradient(to right, blue , violet);


Angled Linear Gradient

In addition to the predefined gradient directions (to bottom, to top, to left, to right, to bottom left, etc.), you can define an angle by degree.


#grad3 {

height: 200px;

background: linear-gradient(-45deg, red, yellow);


Linear Gradient with Multiple Color Stops

As previously mentioned, you can also create gradients with multiple color stops. In the example below, there are three (red, yellow, and green). By default, they are evenly spaced. However, if you want to define the spacing, just type a percentage after each color (such as red 10%, green 85%, blue 90%).


#grad4 {

background: linear-gradient(red, yellow, green);


Repeating Linear Gradient

All of the previously mentioned linear gradient styles can be done in a repetitive style by adding the repeating- variation, as in the example below:


#grad5 {

background: repeating-linear-gradient(red, yellow 10%, green 20%);


CSS3 Radial Gradients

Radial gradients are defined by their center. In order to define a radial gradient, you will have to define two or more color stops – the colors you want to create smooth transitions with.

The basic syntax for this is:

background: radial-gradient(shape size at position, start-color, ..., last-color);

As with linear gradients, the default spacing for radial gradients is evenly spaced ellipses, but you may specify the shape (for example, either: ellipse or circle) and spacing by percentage (for example: red 5%, yellow 15%, green 60%).


#grad6 {

background: repeating-linear-gradient(red, yellow 10%, green 20%);


Repeating Radial Gradient

All of the previously mentioned radial gradient styles can be done in a repetitive style by adding the repeating- variation, as in the example below:


#grad7 {

height: 200px;

width: 300px;

background: repeating-radial-gradient(red, yellow 10%, green 15%);


Transparent Gradients

Lastly, you can also use CSS3 to create gradients that involve transparency, so very cool fading effects could happen. Simply use the rgba() function when defining the different color stops in any of the codes and examples used above. The rgba() function uses values of 0 to 1 – 0 meaning full transparency, while 1 means full color or zero transparency.


#grad8 {

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));


In the example above, the gradient starts from fully transparent towards becoming fully red.

Share and Enjoy !

0 0

Implement a Blur or Filter Effect on an Image Using CSS3

Published August 10, 2017 by saurav.roy.

It’s very common to have different hover effects on HTML elements, especially on images. The power of CSS3 and modern browsers have made this easy to achieve. CSS3 filters are a powerful property to apply filters to images, just like photoshop filters. The filter CSS property lets you apply graphical effects like blurring, sharpening, or color shifting to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. This short post shows how to apply blur filter and combination of blur and greyscale filter on hover on image using pure CSS.

HTML Markup

Let’s start off by creating the HTML markup. Define two image tags with CSS class blur and blurGrey respectively. These CSS classes are also applied to 2 H1 heading elements. So, in case of mouse hover on H1 tag or image, the filter will be applied.
The image used in this demo is taken from FreeImages.

Blur on Hover

Blur and GreyScale on Hover


The filter property accepts a built-in filter function or a custom function. The function accepts a value which can be in percentage or a decimal value. To apply blur filter, we need to pass a blur function with some values. In the HTML, one of the image element and H1 element is having blur CSS class. As we want to apply blur effect on hover, therefore :hover selector is used. Inside the hover selector, pass a decimal value or percentage value to blur function. The bigger the number, the more blur would be there.

.blur {
 -webkit-filter: blur(0);
 filter: blur(0);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
 .blur:hover {
 -webkit-filter: blur(3px);
 filter: blur(3px);

The above CSS classes will apply blur effect on images. The CSS3 transition property allows you to change property values smoothly (from one value to another), over a given duration.
We can also pass multiple filter functions separate by space. This is required when multiple effects are needed. For example, to apply both blur and greyscale effects on image, pass both the filters. Like,

.blurGrey {
 -webkit-filter: grayscale(0) blur(0);
 filter: grayscale(0) blur(0);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
 .blurGrey:hover {
 -webkit-filter: grayscale(100%) blur(3px);
 filter: grayscale(100%) blur(3px);

You can check out working demo here. There are other built-in filter functions to create different effects. Below is a list of all such built-in filter functions to choose.

• brightness() – To adjust the brightness.
• contrast() – To adjust the contrast.
• drop-shadow() – Apply a drop shadow effect.
• hue-rotate() – Applies a hue rotation on the image.
• invert() – Invert the samples on the image.
• opacity() – To manipulate the opacity of the image.
• saturate() – Saturates the image.
• sepia() – Apply sepia (redish brown color) filter on the image.
• url() – for applying SVG filters


To sum it up, we’ve just learned how to apply CSS3 filters to create a blur and greyscale effect on the images and H1 heading element. CSS3 filters are like photoshop filters and can be implemented very easily with a few lines of CSS code. We also saw a list of other built-in filter functions to apply different effects. Have fun!

Share and Enjoy !

0 0

12 Responsive CSS grid systems

Published December 6, 2015 by saurav.roy.

A grid system provides designers with a structure to present their work in a much more manageable and readable way.
The grid systems helps in attaining a level of consistency in designs throughout a site. Here are 12 responsive CSS grid systems that help to make sites more more responsive, beautiful and organized.

1. Motherplate

This is a bare bone CSS3, HTML5 and SCSS responsive boilerplate that doesn’t support any visual components or stylings.


2. 1KB Grid

This is a simple grid system designed to use Sass and to remove classes from the HTML mark-up to make customization easier. It is inspired by the 1KB CSS Grid design. Now it has been extended to support fluid grids as well.

3. Bourbon Neat

Built on top of Bourbon and Sass, this CSS grid system is a semantic grid framework. With its simple design, it has the ability to handle any type of responsive layout.


4. Gridism

This is a simple and easy to use grid system. Grid units are stacked on screens smaller than 568px. On large screens the grids can have a width of 978px or 1140px.


5. Responsive Grid System

This grid system is designed for fast and intuitive development of responsive sites. The Responsive grid system is made available in 12, 16 and 24 columns. It is a fluid CSS framework available with media queries for different devices, clearfix and optional reset.


6. Skelton

This responsive CSS grid system is used to develop sites that look beautiful on screens of any size. It is a collection of CSS files and is built on three principles – fast to start, responsive grid down to mobile and style agnostic.


7. Unsemantic

As a successor to the 960 grid system, this fluid grid system works in a similar way. The only difference is that instead of a set number of columns, it is based on percentages.

8. Less Framework

Developers can design adaptive websites using this CSS grid system. Less Framework consists of 3 sets of typography presets and 4 layouts, completely based on one grid. Using this framework designers can build a website with multiple layouts and make it look more efficient.


9. Herow

This Sass grid system saves time and provides designers with mixins that are easily customizable and simple to use. In order to deal with responsiveness problems, it also provides atomic mixins. Along with these, designers can also play with it in CSS by generating atomic classes.

10. ChewingGrid

ChewingGrid allows designers to add a view that looks like a card listing template. This can be used to arrange videos, pictures or articles in a card view. Users can adjust the width of the card and also the number of columns that they wish to display. It can also be used to build custom semantic grids.


11. One % CSS Grid

This grid system allows designers to create responsive web layouts quickly with ease. This is a percentage based 12 column grid system. It has only two start options, the one which fits 1024px and the other one that fits 1280px.


12. Fluid Baseline Grid

Built with typographic standards, the Fluid Baseline Grid system combines the principles of baseline grids, fluid column layouts and responsive design into a device agnostic and resolution independent framework. It features beautiful typographic standards, common browser inconsistencies, CSS normalization, corrected bugs and better usability.


Share and Enjoy !

0 0

10 Awesome CSS tools for designers

Published November 17, 2015 by saurav.roy.

It is essential for developers to use design tools to increase their knowledge and get projects completed faster.

Here are 10 tools which will be of great help to CSS designers. Using these tools can minimize the effort and time that a developer must put into designing a web page.

1. Stylizr

This CSS tool helps to design anything within a fraction of seconds. To include different styles on a web page easily use Skybound.


2. TopStyle5

TopStyle5 is for Windows users. Designers who use the Windows OS and design their web pages based on HTML5 and CSS3, can make use of this tool. It is considered to be a powerful editing tool for the those languages.


3. CSS3Pie

Progressive Internet Explorer (PIE) supports Internet Explorer 6-9 and makes it capable of providing many of the most useful decorating features of CSS3.


4. Rapid CSS Editor

This tool makes it easy to create and edit modern sites which are based on CSS. Developers can write the CSS code themselves or have it written by the style sheet editor. Auto complete, CSS checker, code inspector and instant built-in multi browser preview are a few awesome features offered by this CSS tool. The main goal of this tool is to simplify tasks and save time.

5. deSVG

Developers can use this tool to remove the inline SVG bloat from HTML documents. It can also be used to create SVGs with CSS.


6. CSS Menu Maker

Make awesome menus using this CSS tool. The menus built using CSS Menu Maker are clean and responsive. All the menu designs provided here are free to download and use. This tool is really helpful, to those who prefer to work with source codes.


7. Coda

Web coders look for a clean, fast and powerful text editor. Coda fits the bill. It also provides users with a pixel-perfect preview and a built-in way through which developers can open and manage files – both locally and remotely.

8. SimpleCSS

This is a free CSS authoring tool which downloaded to create style sheets easily. SimpleCSS is available for both Windows and Mac OS X.

9. Espresso

The features provided by this CSS tool are perfect to turbo-charge workflow. It also allows users to prevail over complicated documents by using the navigator and code folding. Users can also live style pages, visualize layouts with x-ray, and then save the changes with quick publish or sync.


10. SkyBlue

This tool is a minimal framework that can act as a starting point for projects. It uses a grid system consisting of 12 columns. SkyBlue is free to download and use for both personal and commercial projects.

These are 10 CSS tools, which every designer can use to enhance the quality of their web pages. They decrease workload and save precious time.

Share and Enjoy !

0 0

9 Great benefits to using CSS3

Published September 17, 2015 by saurav.roy.

Since its last version, ccs2, Cascading Style Sheets have taken a huge leap forward with its latest version  CSS3. The fact that the new version enhances the look of a design project, but that’s just the beginning of what designers can do when using CSS3. Here is a look at some of the possibilities:

1. Compatible With Older Versions

One of the best features of CSS3 is the fact that it is compatible with older versions of the language. Designers won’t have to give up all their previous work with the predecessors of CSS3. The new language can be reworked on old modules too. However, there might be some speed issues during the conversion.

2. Simple and Independent

Unlike CSS2 (which came as one big package), CSS3 is made of small modules which makes the application easier and simpler to use. Selectors, Color, Box Model, Backgrounds and Borders, Text Effects, 2D/3D Transformations and user interface are some of the most useful modules that CSS3 offers.

3. View and Change Friendly

Since it is broken up into small modules, it’s simpler to change the parts individually without massively affecting the other components which don’t require any major changes. Another great advantage is the fact that it is compatible with all kinds of platforms and can be viewed with similar ease in mobile as well as PCs and tablets.

4. Speedy Development

Being an independent language which is not dependent on JavaScript, CSS3 loads a lot faster than its precursors. The language is pretty well compatible with all the browsers available. The individual modules also help in saving a lot of time during the development, implementation and end of production.

5. Platform Independent and Cross Browser Compatible

When it comes to being platform independent, nothing can beat CSS3. It takes independence to a new level. It also offers designers with special processes which allow them to design components in a very easy manner. Although not under the W3C standards, CSS3 shows compatibility with most of the browsers available which helps because the end users will have a huge range of browsers to choose from.

6. Attractive Backgrounds

Backgrounds are made exciting by the help of CSS3. It allows designers to choose from multiple backgrounds which can be applied with ease. The best part is that the background can be resized to fit the requirements of the project.

7. Borders and Texts

CSS3 allows designers to apply beautiful borders on the page or site they are creating. This helps in enhancing the appearance of the site. It also allows the application of various texts for the content. This helps in highlighting important information.

8. Images and Animations

Aside from easy coding, one of the best qualities of CSS3 is that it helps in enhancing the look of a website or pages immensely. It allows easy integration of the various images, which includes 3D, in the project. It also allows easy inclusion of videos and animations as well. Customization of the images can also be done with ease.

9. Testing the Features

Previous versions required a lot of time to test to detect issues and bugs. But with CSS3’s smaller modules, testing of the individual components becomes easy. Users can then integrate and run a quick compatibility test of all the parts individually. This saves a lot of time and hassle. This in turn requires lower turn out time and client satisfaction.


Share and Enjoy !

0 0

9 Free online courses to learn CSS 

Published July 30, 2015 by saurav.roy.

Much of the world’s business is now being done on the Internet with people using mobiles, tablets,  or laptops looking for news, online shopping, video chats, office documentation, recipes, booking restaurants, reviews of school, locating doctors or even playing games. Our world has shrunk to the 6” inch screen allowing website development companies to multiplying and earn big money.

For those looking to start their own website, learning HTML5 and CSS is a must. They are bread and butter for any developer. But the best part of HTML and CSS is that they are not very hard to decode. The coding is very simple and can be learned quickly, especially if developers take advantage of the free online courses available. Here is a list that will likely help any would-be developer become a pro in very little time.

1. CSS Basics

This is the best course to brush up on the basic skills of using CSS. There are around 18 chapters which explain each topic carefully with lots of examples.


2. CSS Tutorials

These are a collection of tutorials to prepare developers for advanced use of CSS.  Here developers will learn how to control the style and layout of multiple web pages all at once. There are examples in every chapter.


3. CSS Beginner

The tutorials in CSS Beginner are written in a way to help people who know HTML and want to build on that knowledge. The tutorials have a lot of content to help beginners become proficient.


4. CSS Basics: WordPress Style

WordPress is still the most popular platform for creating websites. This tutorial will explain how to incorporate CSS into the WordPress theme. It also helps developers convert a website easily into a mobile App after going through the tutorial.

5. Don’t Fear the Internet

This website is filled with data to teach beginners how to make a WordPress blog and then tweak CSS and HTML to bring ideas to life.  The tutorial is presented in a very humorous and user friendly tone making it very interesting even in midst of some complicated codes.


6. An Advanced Guide to HTML and CSS

An Advanced Guide to HTML and CSS provides students with knowledge on the more advanced features of the CSS coding to develop the front end much better. It will teach users responsiveness, transformation, jQuery, preprocessors and animations.


7. CSS Cross-country

This is for the people who already have beginners and intermediate knowledge of CSS. Here the authors provide videos for more advance learning and fun-filled activities. Users can earn points with every completed challenge.


8. Smashing Magazine’s CSS Coding

Smashing Magazine’s starts with some basic information and then moves to more advance learning. It teaches how to get background images and about moving from PSD to XHTML. It teaches various effects and animations in a fun way with examples.


9. Dev.Opera CSS Basic

This online tutorial teaches all the technical aspects of CSS. It covers topics from what is CSS to defining various styles, animation and effects in the text.



Share and Enjoy !

0 0

12 Creative Effects Created using CSS3 Box Shadows

Published May 20, 2015 by saurav.roy.

In the past couple of years, CSS3 has made huge improvements and gained tremendous popularity. Most of the developers are including it in to their websites for better performance. Apart from the development of unique style,s CSS3 is now being used to develop interesting interface prototypes. CSS3 box shadows is an unique and power-packed feature of the language which can be used to make high impact designs which can be used in various browsers.

What Exactly is Box Shadow?

Box shadows are a property of CSS3 which can be used for the formation of shadow effects on arbitrary components used in the designing of a website. The box shadow is capable of taking the shape of the element with well defined borders. The basic box shadow is comprised of six different properties i.e.  inset, left, top, blur, size, and color. Developers can also create a pop up or layering effect using the CSS3 box shadow effect. To do so use the multiple box shadow property or the text shadow property on the site’s elements. The first time the effect is used, it will appear on the top of the element. When the rest of the effects are applied, it will go on stacking up gradually giving the element a pop up or some pretty creative effects which depend on the various styles depending on how they are applied. When applying the CSS3 box shadow to an element, it will stop when it reaches the end of the element. This feature is particularly helpful when trying to create a shadow effect over a white or monochromatic background.

How Does It Work?

Box shadow commands usually need to be written in 2-4 length values with each separated by a comma. Various kinds of effects along with color schemes and inset effects can be created if desired. Just write down the various values which provide the horizontal effects, vertical effects and blur distance respectively and define the color of the shadow that is being dropped by writing a value write after the 2-4 length value.

The fact that these effects are compatible with most of the leading browsers, makes it even more easy to work with. Check out all the amazing effects using CSS3 Box Shadows and let us know which one is your favorite.

1. Shadow


2. CCS3 Single Element Batman


3. CSS Text Shadow


4. Rainbow Circle


5. Squishy Toggle Buttons


6. Apple Store Icon


7. Animated Text


8. Nar Sang


9. Seconds Counter


10. One Element, Multiple Shadwos


11. Gradient Ghost Buttons


12. Just Playing with ShadowPainter


Share and Enjoy !

0 0

11 Useful Free CSS Codes for Web Developers

Published May 7, 2015 by saurav.roy.

Thanks to recent advances in technology, developers no longer have to start a website from scrtach. There are many HTML/CSS-mark-ups which have templates that can be used to kick-start a website development project.

HTML5 /CSS3 have multiplied the scope of website designing possibilities. With numerous codes available for various things like animation files, headers, hover effects, fonts styles and different type of loaders, developers can be creative. There are various CSS menus, layouts, templates, resources and references available free of cost. Most come with step-by-step instructions on how to use them or provide tutorials.

Below is list of some of the CSS codes which are free to download and can be used to style the webpage. 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.

1. Hover Effect

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.


2. Animated Text Fills

With Animated Text Fills developers can select a portion of text and add some animation into it. It could be in form of animated stoke patterns or color changes or animated shapes.


3. Material UI

Material UI is a complete CSS framework and a set of react components that implement Google’s material design. Developers can go through the react library to learn more about Google material design and start using this code. It is available as npm package. Material UI components have their styles defined inline. Choose one of two approaches to override these styles: overriding individual component styles or define a theme to apply approaching style changes.


4. Tumblr –Style COG Loaders

This code uses animation for loading in tumblr style with CSS and SVG icons designed by Jiri Silha. Developers can use their favorite method to make the image disappear when the content is loaded.


5. Jeet

Jeet is a code for writing grid system. Developers need not define the nesting elements or the twelve column rules. They can build the grids faster, with more flexibility and less code.


6. Item Transition Inspirations

This code is for creating awesome item transitions. Developers can choose a suitable effect amongst a huge list which includes shuffle, snake, coverflow, Ferris Wheel, vertical scale and many more. There are three options for applying the effect small component, full width or transparent for the image to be displayed.


7. Stack Effect

Here developers can get code for some simple inspirations for stack interaction. They can choose from fan out, random rotation, side slide, side grid, peek-a-boo, preview, corner grid, bouncy grid and leaflet.


8. Loading Effects

This code helps developers understand that loading effects need not be restricted to a tiny indicator. Some of the effects are 3D Bar Bottom, Fill Sides, Flat Top Bar, Pie Timer, Big Counter and expanding box.


9. Textured Text

Here developers can get techniques for creating textured texts with CSS. There are eight or nine styles developers can choose from.


10. Single Element CSS Spinners

Here are few of the CSS spinners which can be used to show the time taken for downloading.


11. CSS responsive tabbed navigation

With this code developers can add tabbed navigation which will be responsive according to the screen size.


Share and Enjoy !

0 0

5 Reasons to Learn CSS3

Published April 12, 2015 by saurav.roy.

Cascading Style Sheets  known as “CSS” are one of the most important languages used to control the look of the websites. Web developers can easily control the fonts, layouts, background, texture, color and margin of the website when using CSS. The latest version, CSS3, allows users to create stunning websites with drop shadows, animation and other tools without having to utilize complex scripting. Here are just a few of the reasons website developers will want to know how to utilize CSS3 to produce eye-catching results:


1. Maximize your profits

Learning CSS3 will help you to hone your skills to produce web designs for your clients who are willing to pay for website development. Knowing CSS3 will helps generate more  freelance web designing work and more clients who are looking for web developers with knowledge of the latest developments in web design.

2. Produce websites that entice viewers

Utilizing a free web template to make a new website is pretty easy, but a working knowledge of CSS3 will help produce websites that stand out in a glutted market. CSS3 allows users to customize their websites with unique offerings such as shadows and animations with a variety of backgrounds which in turn will entice viewers.

3. Redesigning becomes easy

CSS3 makes it easy to redesign websites giving them a fresh look and an easier way to make special occasions or promotions stand out with animation and other traffic driving tools. With CSS3, designers can draw attention to particular sections of a website or change backgrounds without having to use complicated techniques.

4. Save money

Cut the cost of hiring someone to redesign or maintain your website by learning CSS3 and gain the ability to make sure the site is updated and maintained the way it was meant to be in the process.

5. Diversify your website

With CSS3, users can create website with a different look highlighting special features on each page. While the HTML content remains the same, CSS3 allows users to change content using page IDs which in turn allows each page to have a different background, animation, shadows and other features.

Lets us know how you enjoyed learning CSS3 in the comment section.

Share and Enjoy !

0 0

Five Informative CSS Blogs All Designers Should Follow

Published February 25, 2015 by saurav.roy.

The days are over when we would depend on designers and developers to help create and update our websites. Now, with CSS available on the market, working on our own websites have become simple and hassle free. CSS is flexible and it is extremely easy to create code. If you have your own website, or are working on creating your own, here are some blogs you can follow to get regular updates of CSS.


1.  CSSWizardry

With this blog, Harry Roberts consults designers on various aspects of websites. This blog will guide you through how to write high quality responsive UIs, how to scale large codebase, or how to rationalize design process.  CSSWizardry also keeps workshops regularly and offers training sessions on company requirements.


2. CSSTricks

On CSSTricks, designer Chris Coyier educates readers on CSS or any modern web technology. You can create your log-in on the website to gain access to videos that will help you create a website from scratch. There are various blogs, videos and snippets to handle all your queries.


3. Life at bleeding edge (Web Standard)

This blog is by a professional front end developer/web designer /computer scientist, Lea Verou. There are various blogs on this website regarding the development of sites and various web standards. Verou can also guide you through experimenting with CSS3.


4. Codrops

Codrops is filled with lists of tricks, tips and tutorials explaining a number of techniques. It is not just CSS based, and is suitable for any web developer.


5. Stubbornella

Stubornella is neat blog covering all aspects of CSS. It will help designers sail through the concepts of website development and answer a lot of basic questions.


Share and Enjoy !

0 0